跨度剪切背景

Question

所以我的任务是创建一个<span>元素，背景不包括整个文本。像这样：它应该停在文本的中间位置。有没有办法做到这一点？

我调查过使用:after伪元素没有运气，并想知道这是否可以用css。我将相当有限的包裹在另一个元素中但是让我知道这是否是解决方法

CSS

span {
  @include blog-styles;
  background-color: $yellow;
}

注意：跨度将是多行

Answer 1

也许是这样的？

 span {
        background: linear-gradient(180deg, yellow 50%, #fff 50%);
    }

https://jsfiddle.net/3f5b48xy/

Answer 2

试试这个。

＆＃13;

＆＃13;

span {
     background: linear-gradient(180deg, #ffffff 50%, #ffff00 50%);
}

＆＃13;

<span>Hello<br>Hi</span>

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个

span {
    height: 100px;
    background: yellow; /* For browsers that do not support gradients */
    background: linear-gradient(180deg, #fff 50%, yellow 50%); /* Standard syntax (must be last) */
}