Css 仅下划线样式

我有一个标题，它使用

文本装饰：下划线边框底部

来实现这一点，但是边框会拉伸容器的整个宽度，并且文本居中。不起作用

您可以使用

display:inline block，用
标记环绕文本，删除
文本装饰：下划线属性并添加
边框底部：2px实心#000


注意：为什么要使用
内联块
？这样您也可以控制间距
在
边框
和文本之间，使用
填充
或
边距
，但如果不需要
显示：内联块你可以像上面说的那样简单地把它去掉。另外，确保在父元素上使用类来选择特定
元素的特定
span
标记。class
对

试试这个款式

  <h1 style="border-bottom: 5px solid black">This is heading 1</h1>

这是标题1

很久以前，CSS3文本模块CR中有一个属性，用于指定厚度。但是，它没有在浏览器中实现，在2005年版本的模块中被删除。这间接表明在CSS中无法设置下划线宽度

关于使用
边框底部
而不是
文本装饰：下划线
，它是一个不同的属性，具有不同的效果（边框基本上处于较低的位置），并且存在许多问题，如何使其与文本一样窄，这似乎是这里的问题。但最简单的方法是使用一些跨标题中文本的内联（文本级）标记，例如

<h1><u>Your heading text</u></h1>

例如，您可以使用
span
元素而不是
u
，但是
u
的优点是，即使在浏览器中禁用CSS样式，也至少可以生成一个简单的下划线。使用
u
，您当然需要关闭其默认下划线，以避免同时获得下划线和底部边框。
+1如果没有内联块，它看起来也很好。。但内联块的东西真的很有用too@NullPoi我会的，但我也提供了一个具体的原因，
内联块
将使他更好地控制该文本：）这就是我所做的，正如我在问题中所说的，它拉伸了容器的整个宽度。
u { text-decoration: none; border-bottom: 0.2em solid }