无涯教程网

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

发布于01月24日

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

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

然后让CSS像这样

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

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

我希望能够告诉浏览器zoom :after图像，但是我无论如何也找不到正确的语法.或者这就像背景图片一样，无法调整大小？

ETA:我倾向于a)将源图像的大小调整到服务器端的"合适"大小，和/或b)更改标记以简单地内联提供img标签.我试图避免这两种情况，但听起来它们比单纯使用CSS更兼容.我原来问题的答案似乎是"有时候你可以做到sort of".

推荐答案

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

Css相关问答推荐

CSS Grid我不想要的东西

如何使用DirectusImage标签作为背景？

Firefox中的解决方法：has(不使用JavaScript)

使用普通 CSS 的视口对角线长度

如何更改 JqGrid 中的pager 背景 colored颜色？

为什么左浮动上的清除：左也会影响右浮动，以及如何避免它

CSS网格列随着长内容改变大小

老虎机插槽上的 CSS 对齐问题

BootStrap：右对齐嵌套手风琴

Flexbox 子高度它的内容

弹性盒项目之间的间距

CSS - 在 id 中 Select 类的语法

如何让 Firefox 在文件更改时自动刷新？

如何在 CSS 中覆盖图像？

Angular 5 在某些类中添加了ng-star-inserted - 那是什么？

css3 nth 类型限制为类

如何强制显示垂直滚动条？

在 Twitter Bootstrap 中创建圆角的正确方法

内联块列表项中不需要的边距

从样式设置为 % 的元素获取宽度(以像素为单位)？

实用课程推荐

相关教程推荐