Question

我有这个问题，因为我在HTML和CSS中学到了很多东西。我刚刚做的是：

HTML：

<div>
  MY NAME HERE
</div>

CSS：

div {
  display:inline-block;
  border-bottom: (desired width) solid (desired color);
}

div {
font-size: 30px;
display:inline-block;
border-bottom: 5px solid black;
}

<div>
MY NAME HERE
</div>

我做得对，还是有一个简单的方法？提前谢谢。

Answer 1

使用text-decoration: underline;。

div {
font-size: 30px;
display:inline-block;
text-decoration: underline;
}

<div>
MY NAME HERE
</div>

Answer 2

好吧它的工作，你得到你想要的输出，所以它没关系，但如果你不需要手动设置线厚度，你可以简单地使用以下：

div {
    text-decoration: underline;
}

Simple fiddle example

Answer 3

.text-decoration {
  text-decoration: underline;
}

.border-bottom {
  display: inline-block;
  border-bottom: 2px dashed orange;
  padding
}

.text-shadow {
  border-bottom: 2px solid #000;
  display: inline-block;
  line-height: 0.85;
  text-shadow: 0 0 #fff 
}

You can use:<br><br>

<span class="text-decoration">text-decoration</span><br>
<span class="border-bottom">border-bottom</span><br>
<span class="text-shadow">text-shadow</span><br>

或曾经弃用过的re-introduced in HTML5 <u>元素，如果这最适合您的语义：

<u>semantic element</u>

如何强调unanchor文本？

3 个答案: