我有一个带有下划线的标题,text-decoration: underline;
唯一的问题是线条太细。我只想把下划线加粗。我考虑过使用border-bottom
来执行此操作,但边框会延伸容器的整个宽度并且文本居中。不工作。
3 回答
<span>
您可以使用标签包装文本,使用display: inline-block;
,删除text-decoration: underline;
属性并添加border-bottom: 2px solid #000;
注意:为什么要使用
inline-block
?这样您还可以使用or控制 theborder
和文本之间的间距,但如果您不需要 ,您可以像NullPoiиteя所说的那样简单地摆脱它。此外,请务必使用父元素上的类来选择特定对的特定标签。padding
margins
display: inline-block;
span
element.class
很久以前,text-underline-width
CSS3 Text Module CR 中有一个属性,定义为指定粗细。但是,它并没有在浏览器中实现,并且在 2005 版本的模块中被删除了。这间接表明在 CSS 中无法设置下划线宽度。
至于使用border-bottom
而不是 a text-decoration: underline
,它是一个不同的属性,具有不同的效果(边框基本上处于较低的位置),并且存在许多关于如何使其与文本一样窄的现有问题,这似乎是问题在这里。但最简单的方法是使用一些跨标题中文本的内联(文本级)标记,例如
<h1><u>Your heading text</u></h1>
与例如
u { text-decoration: none; border-bottom: 0.2em solid }
代替u
,您可以使用例如span
元素,但u
即使在浏览器中禁用 CSS 样式时,它也具有产生至少一个简单下划线的优点。使用u
,您当然需要关闭其默认下划线,以避免同时获得下划线和下边框。