如何在 CSS 中缩放图像:before/:after 伪元素？-css教程-PHP中文网

如何在 CSS 中缩放图像:before/:after 伪元素？

Mary-Kate Olsen

发布： 2024-12-04 09:56:12

原创

165 人浏览过

How to Scale Images in CSS :before/:after Pseudo-Elements?

在 CSS 中缩放图像:before/:after 伪元素

使用伪元素用图像装饰链接可增强视觉吸引力。但是，当图像尺寸与链接文本不对齐时，就需要修改图像高度。

图像高度缩放的语法

与背景图像不同，伪元素图像可以使用背景大小属性进行缩放。但是，这需要指定包含块的宽度和高度。

更正后的 CSS 将为：

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

登录后复制

在此代码中：

background-尺寸：10 像素 20 像素；将图像缩放至 10 像素宽度和 20 像素高度。
display: inline-block;确保伪元素表现为内联元素。
width: 10px;高度：20px；定义包含块的尺寸。
content: "";隐藏伪元素中的所有默认内容。

兼容性

请参阅 MDN 兼容性表以了解各种浏览器的支持详细信息。

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