CSS伪元素是一种非常有用的技术，它可以让我们在HTML文档中的元素中添加额外的样式，而不必额外添加HTML标记。

我们可以使用CSS伪元素对文本进行样式化，比如添加阴影、下划线和特殊符号等。而使用CSS伪元素覆盖本体，也是一项非常重要的技能。

/* 使用::before伪元素覆盖本体 */
.btn {
position: relative; /* 确保容器内部绝对定位可用 */
}
.btn::before {
content: "";
position: absolute; /* 相对于父元素定位 */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* 使其处于下层，不影响页面布局 */
}
.btn:hover::before {
background-color: #f16f6f; /* 覆盖本体的背景颜色 */
transform: scale(1.2); /* 覆盖本体的变形 */
}

代码中，我们给一个按钮容器添加了一个::before伪元素，并将其定位在父元素的最上层。然后，我们使用:hover将其覆盖在按钮本体之上，并添加了背景颜色和变形效果。

通过这种方式，我们可以轻松地用CSS覆盖HTML元素。这不仅让我们在设计中有更大的灵活性，还可以减少不必要的HTML标记，使代码更加精简和可读。