CSS - 文本背景

Question

我有<span>一些文字。此范围已获得background属性，我希望此背景将覆盖文本。这是我的代码：

span {
  background-image: -moz-linear-gradient(left, rgba(255,0,0,1) 0%, rgba(255,17,0,1) 100%);
background-image: -webkit-linear-gradient(left, rgba(255,0,0,1) 0%, rgba(255,17,0,1) 100%);
background-image: -o-linear-gradient(left, rgba(255,0,0,1) 0%, rgba(255,17,0,1) 100%);
background-image: -ms-linear-gradient(left, rgba(255,0,0,1) 0%, rgba(255,17,0,1) 100%);
background-image: linear-gradient(to right, rgba(255,0,0,1) 0%, rgba(255,17,0,1) 100%);

background-size: 4px 6px;
background-repeat: repeat-x;
background-position: 0 .55em;

color: green;
font-size: 24pt;
}

<span>SomeTextSomeText</span>

我希望得到：

不改变background属性，使用伪元素（::after，::before）或添加新元素。可能吗？谢谢你的帮助。

Answer 1

为什么不使用text-decoration属性？

span {
  text-decoration: line-through red;
  color: green;
  font-size: 24pt;
}

<span>SomeTextSomeText</span>

Answer 2

如果您不想使用伪元素，那么您只需添加另一个元素即可指定内联样式：

.element>span {
  background-size: 4px 6px;
  background-repeat: repeat-x;
  background-position: 0 .55em;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.element {
  position: relative;
  color: green;
  font-size: 24pt;
}

<span class="element"><span style="background-image: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 17, 0, 1) 100%);"></span>SomeTextSomeText</span>