Question

我有一个非常简单的设置，即在：after psuedo元素中的所有A href下方添加2px高的“线”。

问题是我希望该行位于html标记内文本的每一行下方，而不仅仅是a的底部。

有没有办法使：after出现在每一行文本下，而不是整个文本块下？

我没有使用文本装饰：下划线；因为我想控制下划线的外观/样式，然后在悬停时对其进行动画处理。

HTML：

<a href="link.com">Some text here that will wrap onto 2 lines because it is quite long</a>

CSS：

a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

我希望：after行在换行时出现在文本的两行下（因此看起来像是常见的链接下划线），但当前它仅在整个A块下显示...

我想要：

Some text that will wrap onto 2 lines 
_____________________________________

because it is quite long.
_________________________

我得到的是

Some text that will wrap onto 2 lines 

because it is quite long.
           _____________

Answer 1

好的，可能不是最优雅的解决方案，但是您可以尝试使用渐变背景：

.gradientLink{  
  line-height: 50px;
  text-decoration: none;
  color: #212121;
  padding: 14px 0;
  background: linear-gradient(0deg, red 1px, white 1px);
}

https://codepen.io/giannidk/pen/MZGPNX

Answer 2

请尝试使用此CSS代码。

 a::after{
  max-width: 50%;
  border-bottom: 1px solid black;
  content: '';
  display: block;

  }

它将在每个标签之后设置边框，您可以通过更改最大宽度大小来手动调整边框宽度。

Answer 3

为什么不使用边框呢？

a{
        padding-bottom: 10px;
        border-bottom: 1px solid grey;
        text-decoration: none;
 }

Answer 4

恐怕您不能使用纯CSS做到这一点。此时，我想到的唯一解决方案是使用javascript将元素/行添加到dom：

我建议您在窗口上订阅'resize'事件，并根据标签占用的行数来更改所需下划线的数量。

绝对将一行放置在多行文本下

4 个答案: