如何让文字装饰下划线延伸到页面的最大宽度？

Question

如何让文字装饰下划线延伸到页面的最大宽度？

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

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

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

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

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

Answer 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*/
}

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

使用

::before

( https://developer.mozilla.org/en/docs/Web/CSS/::before )，您基本上可以“动态”创建一个新元素作为

.word

 中的第一个子元素p

标签，然后使用这个新元素来渲染下划线

Answer 2

你不能像CSS那样扩展下划线。最接近的方法是将文本放入页面全宽的元素中，然后使用

border-bottom

。您可以使用

padding-bottom

和/或

line-height

调整边框与文本的距离。

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

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

Answer 3

为

border-bottom

标签创建

<p>

并减少

line-height

直到它足够接近单词，如下所示：

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

Answer 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>

Answer 5

添加

inline-block

可确保下划线跨越文本的整个宽度。

.underline-text-full {
  border-bottom: 1px solid #F4F6F9 !important;
  display: inline-block !important;
}