css - 仅样式下划线

Question

我有一个使用 text-decoration: underline; 加下划线的标题，唯一的问题是线条太细了。我只想使下划线变粗。我考虑过使用 border-bottom 来执行此操作，但边框会拉伸(stretch)容器的整个宽度并且文本居中。不起作用。

Answer 1

您可以用 <span> 包裹文本周围的标签，使用 display: inline-block; , 删除 text-decoration: underline;属性并添加 border-bottom: 2px solid #000;

Demo

Note: Why use inline-block? So that you can also control the spacing between the border and the text, using padding or margins, but if you don't require display: inline-block; you can simply get rid of it as NullPoiиteя said. Also, be sure to use a class on the parent element to select particular span tag of a particular element.class pair.