如何在 CSS :before/:after 伪元素内调整图像大小？

在 CSS 中修改图像高度：before/:after 伪元素

在 CSS 中，伪元素（:before 和 :after）允许您增强元素的显示，而无需直接修改其内容。然而，调整这些伪元素中的图像高度可能会带来挑战。

假设您希望使用图像装饰特定文件类型的链接。您可以使用类定义链接并包含 CSS 规则，如下所示：

<a href="foo.pdf">

虽然这种方法有效，但它没有考虑图像大小不适合链接文本的可能性。

最初，您可以尝试使用 CSS 调整 :after 图像的大小，但不幸的是，这是不可能直接实现的。与可以使用background-size属性缩放的背景图像不同，伪元素不提供类似的调整大小机制。

但是，有一种解决方法允许在伪元素内进行有限的调整大小：

.pdflink:after {
    background-image: url("/images/pdf.png");
    background-size: 10px 20px;
    display: inline-block;
    width: 10px;
    height: 20px;
    content: "";
}

通过设置background-size并指定块的宽度和高度，您可以有效地调整:after伪元素内的图像大小。需要注意的是，这种方法需要 :after 伪元素定义一些内容，即使它是空的 ("")。

有关更多详细信息，请参阅 Mozilla 开发者网络 (MDN) 兼容性表。

以上是如何在 CSS :before/:after 伪元素内调整图像大小？的详细内容。更多信息请关注PHP中文网其他相关文章！