11 回答

• 80

  允许调整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 .

  回复于 2024-05-07T14:26:22+08:00
• 2

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

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

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

  http://jsfiddle.net/Nwupm/

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

  回复于 2024-05-07T14:26:22+08:00
• 2

  由于我的其他答案显然不是很清楚，这是第二次尝试：

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

  实用（只是告诉我该死的照片！）

  忘了 :after 伪选择器，去寻找类似的东西

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

  理论

  问题是：你可以设置生成内容的样式吗？答案是：不，你可以't. There'在这个问题上是lengthy discussion on the W3C mailing list，但到目前为止还没有解决方案 .

  生成的内容将呈现为生成的框，您可以设置该框的样式，但是not the content as such . 不同浏览器显示非常不同的行为

  #foo {content：url（“bar.jpg”）;宽度：42px;高度：42PX;}
  #foo :: before {content：url（“bar.jpg”）;宽度：42px;高度：42PX;}
  Chrome调整了第一个的大小，但是使用了第二个firefox的图像的内在尺寸，即不支持第一个，并且使用第二个opera的内在尺寸使用两个案例的内在尺寸

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

  类似地，浏览器在诸如http://jsfiddle.net/Nwupm/1/之类的内容上显示非常不同的结果，其中生成了多个元素 . 请记住，CSS3仍处于早期开发阶段，这个问题还有待解决 .

  回复于 2024-05-07T14:26:22+08:00
• 2

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

  .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;
  
  }
  

  回复于 2024-05-07T14:26:22+08:00
• 4

  这是另一个（工作）解决方案：只需将图像调整为您想要的大小:)

  .pdflink:after {
      display: block;
      width: 20px;
      height: 10px;
      content:url('/images/pdf.png');
  }
  

  你需要pdf.png为20px * 10px才能工作 . css中的20px / 10px用于给出块的大小，以便块后面的元素不会与图像混淆

  不要忘记保留原始图像的原始大小的副本

  回复于 2024-05-07T14:26:22+08:00
• 33

  .pdflink:after {
      background-image: url('/images/pdf.png');
      background-size: 10px 20px;
      width: 10px; 
      height: 20px;
      padding-left: 10px;// equal to width of image.
      margin-left:5px;// to add some space for better look
      content:"";
  }
  

  回复于 2024-05-07T14:26:22+08:00
• 1

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

  回复于 2024-05-07T14:26:22+08:00
• 2

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

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

  现在您可以调整元素的宽度，高度将自动调整，增加/减少宽度，直到元素的高度达到您需要的数量 .

  回复于 2024-05-07T14:26:22+08:00
• 3

  您可以像这样更改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;
  }
  

  回复于 2024-05-07T14:26:22+08:00
• 6

  diplay: block; 没有任何影响

  positionin对于前端的基础也是非常奇怪的，所以要小心

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

  回复于 2024-05-07T14:26:22+08:00
• 300

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

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

  回复于 2024-05-07T14:26:22+08:00