时间戳

首页 > 解决方案 > 在多行文本下绝对定位一行

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

问题描述

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

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

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

我没有使用 text-decoration: underline; 是因为我想控制下划线的外观/样式，然后在悬停时对其进行动画处理。

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.
           _____________

标签： htmlcss

解决方案

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

.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

推荐阅读