【问题标题】: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】:

    &lt;p&gt; 标签创建一个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>

      【讨论】:

        猜你喜欢
        • 2019-06-25
        • 1970-01-01
        • 1970-01-01
        • 2012-03-24
        • 2013-09-26
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多