你能控制CSS伪元素内图像的高度吗？

修改 CSS 伪元素中的图像高度：可能吗？

更改 CSS 伪元素中包含的图像的高度(:before/:after) 可能具有挑战性，但并非不可能。默认情况下，CSS 不直接支持调整图像大小。

要实现所需的缩放，请考虑以下方法：

1.调整Background-Size：

对于:在伪元素之后，调整background-size属性。但是，请确保使用 width 和 height 属性指定包含图像的块元素的宽度和高度。

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

兼容性：

注意浏览器使用此方法时的兼容性。有关更多信息，请参阅 MDN 上的综合兼容性表。

2.调整源图像大小：

或者，在 CSS 中使用原始图像之前，请考虑在服务器端将其大小调整为适当的大小。这可确保图像以所需的尺寸显示，而不依赖于浏览器缩放。

3.内联 IMG 标签：

要使用更直接的方法，请合并内联 标签。标签与 CSS 伪元素并排。这种方法保证图像将以指定的尺寸渲染，但偏离了最小化标记的初始目标。

以上是你能控制CSS伪元素内图像的高度吗？的详细内容。更多信息请关注PHP中文网其他相关文章！