如何在伪类之前设置SVG图像的大小？

在CSS中，如果想在伪类（如 ::before 或 ::after）中使用SVG图像并调整其大小，通常有几种方法可以实现。以下是具体的步骤和示例：

方法1：直接在SVG代码中设置大小

如果你可以直接修改SVG代码，你可以在SVG的width和height属性中直接指定大小。然后将这个SVG代码作为Base64编码或直接插入到CSS中。

示例：

假设我们有一个简单的SVG图像，我们可以在SVG文件中这样设置：

xml
<svg width="30px" height="30px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <!-- SVG内容 -->
</svg>

然后将其转换为Base64编码，并在CSS中使用：

css
.element::before {
    content: "";
    display: block;
    width: 30px;  /* 可以重新调整，但建议和SVG内部一致 */
    height: 30px;
    background-image: url("data:image/svg+xml;base64,..."); /* Base64编码的SVG */
    background-size: contain;
}

方法2：使用CSS控制背景大小

如果你不能修改SVG文件本身，或者你从一个URL获取SVG，你可以使用CSS的background-size属性来控制SVG图像的大小。

示例：

css
.element::before {
    content: "";
    display: block;
    width: 50px;  /* 设置伪元素的宽度 */
    height: 50px; /* 设置伪元素的高度 */
    background-image: url("path/to/your/image.svg"); /* SVG文件的路径 */
    background-size: cover; /* 或者可以使用具体的尺寸，如 '30px 30px' */
    background-repeat: no-repeat;
    background-position: center;
}

这种方法可以让你在不改动SVG文件的情况下，通过CSS控制其在伪类中的显示大小。

总结

两种方法都可以实现在伪类中使用并调整SVG图像的大小，选择哪一种方法取决于你对SVG文件的控制程度以及你的具体需求。如果需要频繁调整大小或者有多个地方使用相同的图像但大小不同，可能第二种方法更加灵活。如果对性能有极高要求，直接修改SVG文件并以Base64形式嵌入可能更有效。