CSS內容元素的使用：在img之前工作很奇怪

我想在一些li點之前放置三個不同的圖像，但不知何故，它只是不按我想要的方式工作。有人能幫我嗎？現在，它看起來像這樣：CSS content CSS內容元素的使用：在img之前工作很奇怪

正如你所看到的，儘管我使用了：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>

我在做什麼錯？

來源

2015-10-26 Misaki Saraya

管理它的一種方法是設置一個背景圖像來代替圖像，以便能夠更改圖像的高度和寬度。還可以使用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

來源

2015-10-26 11:29:32

改變圖像的高度和寬度，謝謝你這麼多你的評論，它的工作！ –

不客氣，不要忘記將答案設置爲下一個人來這裏的最佳答案:) –

你必須爲他們設定一個height和width你希望他們有多大。對於圖像和文本容器（如果它是p標籤或任何標籤），請嘗試使用：display:inline，或者如果這樣做不起作用，請使用float:left作爲圖像。

來源

2015-10-26 11:12:49

不確信他是否能在僞元素 –

CSS內容元素的使用：在img之前工作很奇怪

回答

相關問題