动态文本用大括号加下划线

Question

我想强调一个字一个圆形支架.这应该是C#Text的一部分,但如果它在CSS中更容易,没问题.我的问题是,Word的长度可能会有所不同,因此必须为每个单词计算弓.

我的第一个想法是使用CSS box-shadow:

CSS:

#test {
  font-size: 50px;
  background: transparent;
  border-radius: 70px;
  height: 65px;
  width: 90px;
  box-shadow: 0px 6px 0px -2px #00F;
  font-family: sans-serif;
}

HTML:

<div id="test">Hey</div>

不幸的是,由于动态文本大小,我无法计算它们.

这个问题有更聪明的方法吗？

Answer 1

如果使用span标记,则无需计算宽度.

CSS:

.test {
  font-size: 50px;
  background: transparent;
  border-radius: 70px;
  height: 65px;
  box-shadow: 0px 6px 0px -2px #00F;
  font-family: sans-serif;
}

HTML:

<span id="test" class="test">Hey</span><br/>
<span class="test">Hey this is longer</span>

工作小提琴:http://jsfiddle.net/Ge8Q3/