CSS偽元素不起作用

Question

我正在嘗試在div內的圖像下創建漸變border 。

我100％肯定我的CSS代碼本身非常好，因為我之前在其他元素上測試過它。

問題是它以某種方式拒絕選擇正確的元素並將偽元素放在它下面。

 #profilePicture { width: 200px; margin-left: 25px; border-top: 1px solid #070707; border-left: 1px solid #070707; border-right: 1px solid #070707; } #pf { display: block; width: 200px; } #pf:first-child:after { content: ''; position: absolute; width: 200px; height: 1px; background: -webkit-linear-gradient(left, #070707, #a1a1a1, #070707); background: -moz-linear-gradient(left, #070707, #a1a1a1, #070707); background: -o-linear-gradient(left, #070707, #a1a1a1, #070707); background: linear-gradient(to right, #070707, #a1a1a1, #070707); top: -1px; left: 0; } 

 <div id="profilePicture"> <img id="pf" src="layout/images/profile/pf.png"> </div> 

據我所知，它應該選擇#pf ，它是其父級的第一個子級（true）並在其后添加偽元素？

編輯：我確實嘗試了top: 1px和更高的高度 s，以確保。 這沒有效果。

Answer 1

你不能在img標簽中使用偽元素（ ::before和::after ）（至少目前為止）。

了解W3C規范的內容 ：

注意。 此規范未完全定義:after替換元素（例如HTML中的IMG ） :before和:after的交互。 這將在未來的規范中更詳細地定義。

因此，您必須將偽元素應用於父元素。

你還需要在父元素中使用position:relative ，因為你在pseudo元素中應用position:absolute 。 有了它，您將使用DOM將偽元素保留在流中。

請注意，您的CSS中有一些更改

 body { margin: 0 } #profilePicture { width: 200px; margin-left: 25px; position: relative; border: solid #070707; border-width: 1px 1px 0 1px } #pf { display: block; } #profilePicture::after { content: ''; position: absolute; width: 200px; height: 5px; background: -webkit-linear-gradient(left, #070707, #a1a1a1, #070707); background: -moz-linear-gradient(left, #070707, #a1a1a1, #070707); background: -o-linear-gradient(left, #070707, #a1a1a1, #070707); background: linear-gradient(to right, #070707, #a1a1a1, #070707); bottom: 0; left: 0; } 

 <div id="profilePicture"> <img id="pf" src="//dummyimage.com/200x200&text=image"> </div> 

Answer 2

你不能:after img標簽中使用偽元素（ :before和:after ），在img周圍創建額外的div或者:after你的#profilePicture元素:after添加:after 。

此外，沒有理由在#pf:first-child:after中使用first-child #pf:first-child:after選擇器#pf:first-child:after因為頁面上只有一個帶有pf id的元素。

編輯：

1. 添加position: relative對於您的#profilePicture
2. 刪除top: 1px; 來自:after
3. 添加bottom: 0; 到:after

Answer 3

只需為此選擇器#profilePicture添加position:relative ，並將#profilePicture::after更改為：

 #profilePicture::after { content: ''; position: absolute; width: 200px; height: 1px; background: -webkit-linear-gradient(left, #070707, #a1a1a1, #070707); background: -moz-linear-gradient(left, #070707, #a1a1a1, #070707); background: -o-linear-gradient(left, #070707, #a1a1a1, #070707); background: linear-gradient(to right, #070707, #a1a1a1, #070707); bottom: 1px; left: 0; }