css - 多行文本标记效果

Question

我只使用了一个很好的文本标记效果 css。虽然如果跨度在一行中开始和结束(在本例中为 my)，这会起作用，但如果 跨越多行(例如 something 有时我'm).是否可以在超过一行后应用 strike::after 的效果？

article{
  font-family: Arial;
  font-size: 1rem;
  border: 1px dotted;
  width: 300px;
  padding: 1rem;
}


@keyframes strike{
  0%   { width : 0; }
  100% { width: 100%; }
}

.strike {
    position: relative;
}

.three::after {
    content: ' ';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 16px;
    margin-top: -3px;
    background: rgba(237, 255, 33, 0.7);
    animation-name: strike;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

<article class="col--padding js-click-link startpanel">
<p class="blog__body">Hello <span class="strike three">my</span> name is <span class="strike three">something and sometimes I'm</span> highlited</p>
</article>

Answer 1

无法将 :after 扩展到下一行，但可以在没有任何 :after 伪类的情况下构建效果，并使用背景动画，就像这样:

@keyframes strike{
  0%   { background-size: 0 100%; }
  100% { background-size: 100% 100%; }
}

.three {
    background-image: linear-gradient(rgba(237, 255, 33, 0.7) 0, rgba(237, 255, 33, 0.7) 100%);
    background-size: 0 100%;
    background-position: 0 0;
  background-repeat: no-repeat;
    animation-name: strike;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

所以在这里，我只是将纯色背景图像附加到您的 .three 元素，并根据 X-asis 从 0% 到全宽对其背景大小进行动画处理，它可以正常工作!

请检查working code here ，我已经为你准备了codepen!