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标记。

Answer 2

很久以前，CSS3文本模块CR中有属性text-underline-width，定义为指定厚度。但是，它没有在浏览器中实现，并且在2005版本的模块中被删除了。这间接表明无法在CSS中设置下划线宽度。

关于使用border-bottom代替text-decoration: underline，它是一个不同的属性，具有不同的效果（边界处于基本上较低的位置），并且有许多关于如何制作的现有问题它和文本一样狭窄，这似乎是问题所在。但最简单的方法是使用一些跨越标题中文本的内联（文本级）标记，例如。

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

与例如

u { text-decoration: none; border-bottom: 0.2em solid }

而不是u，您可以使用例如span元素，但u的优点是，即使在浏览器中禁用CSS样式，也至少会生成一个简单的下划线。使用u，您当然需要关闭其默认下划线，以避免同时出现下划线和下边框。

Answer 3

尝试这种风格

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

DEMO

仅限样式下划线

3 个答案: