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

Question

假设我想使用图像装饰指向某些文件类型的链接.我可以将我的链接声明为

<a href='foo.pdf' class='pdflink'>A File!</a>

然后有CSS喜欢

.pdflink:after { content: url('/images/pdf.png') }

现在,这很好用,除非pdf.png我的链接文本的大小不合适.

我希望能够告诉浏览器缩放:after图像,但我不能为我的生活找到正确的语法.或者这就像背景图像,只是不能调整大小？

ETA:我倾向于a)将源图像的大小调整为"正确"大小,服务器端和/或b)更改标记以简单地提供内联的IMG标记.我试图避免这些事情,但他们听起来比试图纯粹用CSS做的东西更兼容.答案我原来的问题似乎是"你可以排序的做到这一点,有时".

Answer 1

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

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

请参阅MDN上的完整兼容性表.

Answer 2

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

以下只是一个想法,上面的解决方案更实用.

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

http://jsfiddle.net/Nwupm/

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

Answer 3

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

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

实用(只是告诉我该死的照片!)

忘记:after伪选择器,去寻找类似的东西

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

理论

问题是:你可以设置生成内容的样式吗？答案是:不,你不能.关于这个问题的W3C邮件列表已经进行了长时间的讨论,但到目前为止还没有解决方案.

生成的内容将呈现为生成的框,您可以设置该框的样式,但不能将内容设置为样式.不同浏览器显示非常不同的行为

#foo         {content: url("bar.jpg"); width: 42px; height:42px;}  
#foo::before {content: url("bar.jpg"); width: 42px; height:42px;}

Chrome会调整第一个的大小,但会使用第二个图像的内在尺寸

firefox和ie不支持第一个,并使用第二个内在维度

opera使用两种情况的内在维度

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

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

Answer 4

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

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

}

Answer 5

是的，最初的问题是八年前提出的，但它实际上一如既往地与今天相关。现在，我已经在 ::before 和 ::after 的这个问题上从一个支柱到另一个帖子，大约一周了，它一直让我转过弯。

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

** 运行 note .colnav 只是我的容器类，它包含一组 < UL > 和 < LI > 标签，其中包含一组 < a href。

下面是代码（完整）

.colnav li.nexus-button a:hover:before {   
    background-image: url('/images/fleur-de-lis.png');
    background-size: 90px 20px;
    background-repeat: no-repeat;
    width: 130px;
    height: 20px;
    margin-left: -120px;
    margin-top: -3px;
    transform: scale(1.5);
    content: "";
    position: absolute;
}

图像文件的尺寸为 120 x 80，图片被缩小到 90x 20，然后它非常适合 html href 标签后面，并且所有这些都与最后的位置：绝对声明结合在一起。

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

Answer 7

您可以设置元素本身的宽度和高度，而不是设置背景图像的宽度和高度。

.pdflink::after {
  content: '';
  background-image: url(/images/pdf.png);
  width: 100px;
  height: 100px;
  background-size: contain;
}