CSS 内容元素使用 :before img 工作很奇怪

Question

我试图在一些 li 点之前放置三个不同的图像，但不知何故，它无法按我想要的方式工作。有人能帮我吗？现在，它看起来像这样：CSS content

如您所见，即使我使用了 :before，图像也没有保留在我想要的文本旁边。图片也很大，但我只希望它们和文字一样小。

这是我用过的 CSS 代码：

a[href*="bron.pdf"]:before {
    content: url("PDF%20img%20.gif");
}

a[href*="bron.vcf"]:before {
content: url("vcard-icon.png");
}

a[href*="bron.jpg"]:before {
content: url("adobe%20img%20.png");
}

这是 HTML 代码：

<section>
   <h4>Downloads</h4>
        <ul>
           <li><a href="bron.pdf" data kb="1267">project_CMDA_Moet_ik_rennen.pdf</a> (1.3MB)</li>
           <li><a href="bron.vcf">Contactgegevens_CMDA_Moet_ik_rennen.vcf</a></li>
          <li><a href="bron.jpg" data-kb="569">Poster_CMDA_Moet_ik_rennen.jpg</a> (569KB)</li>
        </ul>
</section>

我做错了什么？

Answer 1

您必须为它们设置一个 height 和 width，以决定您希望它们有多大。还可以尝试使用：display:inline 用于图像和文本容器（如果它是 p 标签或任何标签），或者如果这不起作用，请使用 float:left 用于图像。

Answer 2

管理它的一种方法是设置背景图像代替图像，以便能够更改图像的高度和宽度。还可以使用 display: inline-block 使文本和图像彼此相邻。

a:before {
    content:"";
    display:inline-block;
    width: 20px; 
    height: 18px;
    background-size: cover;   
}

（当然，高和宽要看你想要的大小）

然后将背景图像属性添加到您的每个元素

a[href*="bron.pdf"]:before {
    background-image: url("PDF%20img%20.gif");
}

a[href*="bron.vcf"]:before {
    background-image: url("vcard-icon.png");
}

a[href*="bron.jpg"]:before {
    background-image: url("adobe%20img%20.png");
}

Here an exemple of a working exemple

CSS 内容元素使用 :before img 工作很奇怪

CSS Content element use :before img works weird

html

css

element