Question

有没有办法让:after伪元素的样式应用于某些多行文本的每一行？

我的代码如下：

.container {
    width: 50px;
}

.text {
    position: relative;
}

.text:after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(red, yellow);
    z-index: -1;
}

<div class="container">
    <p class="text">This is some multi-line text...</p>
</div>

从示例中可以看出，after元素正确应用但仅限于文本的最后一行，是否有任何方法可以在每一行上显示此样式？

谢谢！

Answer 1

使用repeating-linear-gradient

＆＃13;

.container {
    width: 170px;
}

.text {
    position: relative;
    width: 100%;
    font-size: 18px;
    line-height: 18px;
}

.text:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(180deg, transparent, transparent 15px, red 16px, yellow 18px);
    z-index: -1;
}
.text:hover:after {
  background: none;
  background-color: tomato;
}

＆＃13;

<div class="container">
    <p class="text">This is some multi-line text...This is some multi-line text...This is some multi-line text...This is some multi-line text...This is some multi-line text...This is some multi-line text...This is some multi-line text...This is some multi-line text...This is some multi-line text...</p>
</div>

＆＃13;

Answer 2

不，没有办法得到你想要的伪。

我发现获得此类效果的唯一方法是使用覆盖基础背景图像的背景图像。在此设置从白色到透明的略微倾斜的过渡。当从左向右移动时，它将覆盖/揭开底层图像

＆＃13;

.container {
    width: 100px;
}

.text {
    position: relative;
    font-size: 30px;
    line-height: 1.2em;
    background-image: linear-gradient(to left top, transparent 49%, white 51%);
    background-size: 5000% 1.2em;
    background-position: left center;
    transition: background-position 2s;
}

.text:hover {
    background-position: right center;

}

.text:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, red, yellow);
    z-index: -1;
    background-size: 100% 1.2em;
    line-height: 1.2em;
}

＆＃13;

<div class="container">
    <p class="text">This is some multi-line text...</p>
</div>

＆＃13;

：在多行文本上的伪元素之后

2 个答案: