我可以在 CSS :before/:after 伪元素中更改图像的高度吗？

允许调整 background-size。但是，您仍然需要指定块的宽度和高度。

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

See the full Compatibility Table at the MDN。

---

请注意，:after 伪元素是一个盒子，它又包含生成的图像。无法为图像设置样式，但您可以设置框的样式。

以下只是一个想法，solution above更实用。

.pdflink:after {
    content: url('/images/pdf.png');
    transform: scale(.5);
}

http://jsfiddle.net/Nwupm/

缺点：你需要知道图像的内在尺寸，它会给你留下一些空白，我无法摆脱 ATM。

---

由于我的其他答案显然没有被很好地理解，所以这是第二次尝试：

有两种方法可以回答这个问题。

实用（只给我看该死的照片！）

忘掉 :after 伪选择器，选择类似的东西

.pdflink {
    min-height: 20px;
    padding-right: 10px;
    background-position: right bottom;
    background-size: 10px 20px;
    background-repeat: no-repeat;
}

理论

问题是：你可以为生成的内容设置样式吗？答案是：不，你不能。有一个关于这个问题的lengthy discussion on the W3C mailing list，但到目前为止还没有解决方案。

生成的内容会呈现到生成的框中，您可以设置该框的样式，但是 not the content as such。不同的浏览器表现出非常不同的行为

#foo {内容：url("bar.jpg");宽度：42px； height:42px;} #foo::before {content: url("bar.jpg");宽度：42px； height:42px;} Chrome 调整第一个的大小，但使用图像的内在尺寸用于第二个 firefox，即不支持第一个，并为第二个使用内在尺寸 Opera 对这两种情况都使用内在尺寸

（来自 http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html ）

同样，浏览器在诸如 http://jsfiddle.net/Nwupm/1/ 之类的东西上显示非常不同的结果，其中生成了多个元素。请记住，CSS3 仍处于早期开发阶段，此问题尚未解决。

---

您应该使用背景而不是图像。

.pdflink:after {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}

---

diplay: block; 没有任何影响

positionin 根据前端基础也很奇怪，所以要小心

body:before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
    position: fixed;
    left: 50%;
    top: -6%;
    background: white;
}

---

是的，最初的问题是八年前提出的，但它实际上与今天一样具有相关性。现在，我在这期 ::before 上从一个支柱到另一个帖子，已经持续了大约一周 ::after，它一直在驱使我绕过弯道。

从这个页面，以及其他关于这个主题的页面——我终于把它放在一起，并在伪标签中缩小了一个图像的大小。

** 运行注释 .colnav 只是我的容器类，它包含一个

和
• 标记集，其中包含一组

  下面是代码（完整）

  .colnav li.nexus-button a:hover:before { background-image: url('/images/fleur-de-lis.png');背景尺寸：90px 20px；背景重复：不重复；宽度：130px；高度：20px；左边距：-120px；边距顶部：-3px；变换：比例（1.5）；内容： ””;位置：绝对； }

  图像文件是（是）120 x 80，图片被缩小到 90x 20，然后它非常适合在 html href 标签后面，所有这些都与那个位置一起出现：最后的绝对声明。

  ---

您可以使用 zoom 属性。检查this jsfiddle

---

现在使用 flexbox，您可以大大简化您的代码，并且只需根据需要调整 1 个参数：

.pdflink:after {
    content: url('/images/pdf.png');
    display: inline-flex;
    width: 10px;
}

现在您只需调整元素的宽度，高度会自动调整，增加/减少宽度，直到元素的高度达到您需要的数字。

---

您可以像这样更改 Before or After 元素的高度或宽度：

.element:after {
  display: block;
  content: url('your-image.png');
  height: 50px; //add any value you need for height or width
  width: 50px;
}

---

我使用了这个字体大小控制宽度

.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');      
background-size: 100%;      
content: ".......................................";
font-size: 30pt;
}

---

content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;

---