html - CSS 内容元素使用 :before img works weird

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

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

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

(当然，调整高度和宽度取决于你想要的尺寸)。

然后将 background-image 属性添加到您的每个元素

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