如何用 HTML 和 CSS 实现伪元素效果？

在不使用伪元素的情况下，如何实现类似样式？

问题：

如何使用 HTML 和 CSS 代码实现这样的样式，而无需使用伪元素？

<p></p>

回答：

除了使用伪元素，还可以通过以下方法实现类似样式：

<p><span></span></p>

p {
  position: relative;
}

p span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f00;
  z-index: -1;
}

如上例所示，<span> 元素被用作背景层，放在 <p> 元素的后面。可以通过调整 <span> 的位置、大小和背景色来定制样式。

参考文章：

有关更详细的解释，请查看以下文章：

https://segmentfault.com/a/11