在 CSS 中扩展下划线

Question

是否可以过度延伸和下划线，使其比单词本身更进一步？

像这样：

我尝试过：

.numbers u {
    width:200px;
}

小提琴

我希望它能起作用，但我什么也没得到。

是否有某种 CSS 技巧可以实现这一点？

Answer 1

您可以将

content

属性与

:after

伪属性一起使用，如果您不想使用此属性，则需要在每个

 

标签上提供

u

.numbers u:after {
    content: "\00a0\00a0\00a0\00a0";
}

演示1

.numbers {
  line-height: 10px;
}

.numbers u:after {
  content: "\00a0\00a0\00a0\00a0";
}

<div class="numbers">

  <p><u>One</u></p>
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>
  <p>Five</p>

</div>

信息：这里的 00a0 是什么？这是一个不间断空间

也可以使用类似的东西

.numbers u:after {
    content: "................";
    color: transparent;
}

演示2（但我更喜欢

\00a0

一个..）

.numbers {
    line-height:10px;
}

.numbers u:after {
    content: "................";
    color: transparent;
}

<div class="numbers">

    <p><u>One</u></p>
    <p>Two</p>
    <p>Three</p>
    <p>Four</p>
    <p>Five</p>
    
</div>

---

就浏览器支持而言，IE8 中支持

content

以及

:after

，旁注，IE9 中支持

::after

，但在这里使用

:after

就可以了。所以支持应该不重要。

Answer 2

不。您需要放置一个

border-bottom

并在文本所在的位置扩展

p

的宽度。

工作演示

HTML：

<p class="underline">One</p>

CSS：

.underline{border-bottom:1px solid #000000; width:200px; padding-bottom:5px;}

希望这有帮助。

Answer 3

使用边框而不是下划线。使用

first-child

伪类将其仅应用于

.numbers

中的第一段：

.numbers p:first-child {
    width:200px;
    border-bottom:1px solid #000;
    padding-bottom:1px;
}

JSFiddle