c# - 带大括号下划线的动态文本

Question

我想用round 大括号给单词加下划线。这应该是 C# 文本的一部分，但如果在 CSS 中更容易，没问题。我的问题是单词的长度可能会有所不同，因此必须为每个单词计算弓。

我的第一个想法是使用 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>

工作 fiddle :http://jsfiddle.net/Ge8Q3/