如何使文本装饰下划线扩展到页面的最大宽度？答案

【问题标题】：How do I make text-decoration underline extend for the maximum width of the page?如何使文本装饰下划线扩展到页面的最大宽度？
【发布时间】：2016-04-16 16:36:33
【问题描述】：

如何使文本装饰下划线扩展到页面的最大宽度？

通常它只延伸到单词，但我希望该行填满整个页面。

我尝试使用边框线而不是文本装饰，但这会导致线条在单词下方太远。

    example:
    .word {
    text-decoration: underline;
    }

    <p class="word">EXAMPLE</p>

现在下划线只延伸到单词EXAMPLE。如何让线条延伸到整个页面的宽度？

【问题讨论】：

你能展示你想要的吗？
丹尼尔，现在看看。

标签： html css

【解决方案1】：

使用::before伪元素并生成content这样

.word {}
.word::before {
  content:" ";
  position: absolute;
  border-bottom:1px solid red; /*use this to adjust underlin color and size*/
  width:100%;  /*use this to adjust underline width*/
  height:1.1em; /*use this to adjust underline position*/
}

&lt;p class="word"&gt;EXAMPLE&lt;/p&gt;

使用 ::before ( https://developer.mozilla.org/en/docs/Web/CSS/::before ) 你基本上会在 .word p 标记中“即时”创建一个新元素作为第一个子元素，然后使用这个新元素来呈现你的下划线

【讨论】：

为什么必须包含 :before？
::在创建元素之前我们应用边框样式来模拟下划线，优点是我们可以控制下划线的控制位置、大小和外观

【解决方案2】：

您不能像使用 CSS 那样扩展下划线。最接近的方法是将文本放在页面全宽的元素中，然后使用border-bottom。您可以使用padding-bottom 和/或line-height 调整边框与文本的距离。

.word {
  border-bottom: 1px solid black;
  font-size: 16px;
  line-height: 13px;
 }

   &lt;p class="word"&gt;EXAMPLE&lt;/p&gt;

【讨论】：

【解决方案3】：

为<p> 标签创建一个border-bottom 并减少line-height 直到它与以下单词足够接近：

p {
   border-bottom:1px solid #ccc;
   font-size:14px;
   line-height:12px;
   width:100%;
}

【讨论】：

【解决方案4】：

您可以使用背景图像（或渐变）。

.word {
  background:linear-gradient(to bottom,transparent 1em, black 1em, black 1.1em, transparent 1.1em ,transparent 1.2em)  0 0.1em;/* color black can be reset to any other */
  background-size:auto 1.2em;/* set this according to line-height set */
}

<h1 class="word">title</h1>
<h2 class="word">title</h2>
<h3 class="word">title</h3>
<h4 class="word">title</h4>
<h5 class="word">title</h5>
<h6 class="word">title</h6>
<p class="word">EXAMPLE</p>
<p class="word">two<br/> lines</p>

【讨论】：