仅样式下划线答案

【问题标题】：Style Only Underline仅样式下划线
【发布时间】：2013-06-29 08:28:35
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

注意：为什么使用inline-block？这样你也可以控制间距在border 和文本之间，使用padding 或margins，但如果您不需要 display: inline-block; 你可以像NullPoiиteя 说的那样简单地摆脱它。此外，请务必使用父元素上的类来选择特定 span 对的特定 span 标记。

【讨论】：

+1 如果没有内联块 jsfiddle.net/vpqZX ，它看起来也很好 .. 但内联块的东西也真的很有帮助
@NullPoiиteя 它会，但我也提供了一个具体原因，inline-block; 会让他更好地控制该文本:)

【解决方案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 而不是 u span 元素，但 u 的优点是即使在浏览器中禁用 CSS 样式时也至少会产生一个简单的下划线。使用u，你当然需要关闭它的默认下划线，以避免同时出现下划线和下边框。

【讨论】：

【解决方案3】：

试试这种风格

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

DEMO

【讨论】：

这就是我所做的，正如我在问题中所说，它拉伸了容器的整个宽度。