假设想使用图像来装饰指向某些文件类型的链接
<a href='foo.pdf' class='pdflink'>A File!</a>
CSS
.pdflink:after { content: url('/images/pdf.png') }
这么做是对的吗
注意,:after
伪元素是一个框,它反过来包含生成的图像.。没有方法可以对图像进行样式化,但是您可以对框进行样式化。
以下只是一个想法,以上溶液更实用。
.pdflink:after {
content: url('/images/pdf.png');
transform: scale(.5);
}
缺点:你需要知道图像的内在尺寸,它给你留下了一些空白,这是我无法摆脱的自动取款机。
调整background-size
。但是,仍然需要指定块的宽度和高度。
.pdflink:after {
background-image: url('/images/pdf.png');
background-size: 10px 20px;
display: inline-block;
width: 10px;
height: 20px;
content:"";
}