仅限样式下划线

Question

我有一个标有下划线的标题text-decoration: underline;唯一的问题是该行太薄了.我想只做下划线更粗.我考虑border-bottom过这样做,但是边框会拉伸容器的整个宽度,文本会居中.不行.

Answer 1

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

演示

注意:为什么要使用inline-block？因此你也可以border使用padding或控制文本和文本之间的间距margins,但是如果你不需要, display: inline-block;你可以简单地将其删除,如NullPoiиteя所说.此外,请务必使用父元素上的类来选择span特定element.class对的特定标记.