伪元素content属性为图片时不能设置图片尺寸

1，问题描述

想对伪元素添加图片并控制图片大小，步骤如下：

1. 设置content 为图片路径
2. 设置 width height 控制图片大小

代码如下：

<template>
  <p>图片原大小32*32</p>
  <img src="/vite.svg" alt="" />
  <div class="box">下雪天的夏风</div>
</template>
<style lang="scss">
.box {
  &::after {
    content: url("/vite.svg");
    display: inline-block;
    width: 16px;
    height: 16px;
  }
}
</style>

效果如下：

可以看到，给::after 设置的width height 并没有影响到 content 中的图片大小。

2，原因分析

因为使用 content 属性插入的内容都是匿名的可替换元素。

可替换元素，CSS 可以影响它的位置，但不会影响它的内容。

所以，给::after 设置的width height 是无效的。

3，解决方案

通过背景图片的方式来实现。

<template>
  <p>图片原大小32*32</p>
  <img src="/vite.svg" alt="" />
  <div class="box">下雪天的夏风</div>
</template>
<style lang="scss">
.box {
  &::after {
    content: "";
    background-image: url("/vite.svg");
    background-size: contain;
    display: inline-block;
    width: 16px;
    height: 16px;
  }
}
</style>

效果如下：

以上。

---

参考

content-MDN

可替换元素-MDN