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>

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

4 个答案: