html - 在多行文本下绝对定位一行

Question

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

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

有没有办法让 :after 出现在每行文本下面，而不是整个文本 block ？

我没有使用文本修饰:下划线；是因为我想控制下划线的外观/样式，然后在悬停时为其设置动画。

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 block 下方......

我要:

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