什麼是::之後在這裏做：<div class=foo><span>bar</span>::after</div>

Question

我無法理解：插入HTML代碼後，CSS標記後會做什麼。例如，

<div class=foo> 
    <span>xyz</span> 
    ::after 
</div> 

任何幫助表示讚賞。

Answer 1

這不是一個標籤，它是一個在CSS中使用的僞元素選擇器，用於創建元素:before或:after目標元素。

僞元素是做什麼的？

一個僞元素正是這個詞所暗示的。它會創建一個 虛構元素，並將其插入到您定位的元素 的內容之前或之後。

這個詞「僞」是一個希臘字，基本上 的意思是「撒謊，騙人的，假的。」所以，美其名曰僞元素是 適當的音譯，因爲它們實際上並不在 改變什麼文件。相反，他們插入了用戶可以看到並且可以在CSS中進行風格化的幽靈般元素。

http://www.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

Answer 2

::後是一個僞元素，它允許你插入內容到從CSS頁面（無需重寫是在HTML）。雖然 最終的結果是不實際的DOM，它出現在頁面上，就好像它是 ，並且將基本上是這樣的：

div::after { 
    content: "hi"; 
} 

::之前僅是完全一樣的它插入內容之前的任何 其他內容而不是之後。唯一的理由使用 了另一種是：

• 你想生成的內容來位置上的元素內容之前， 。

• ::之後的內容在源代碼順序中也是「之後」，所以如果自然地堆疊在另一個之上，它將位於::之前的頂部 位置。

  CSS2語法= 元件：後{樣式屬性}

  CSS3語法= 元素::後{式場所}

.exciting-text::after { 
 
    content: "<- now this *is* exciting!"; 
 
    color: green; 
 
} 
 

 
.boring-text::after { 
 
    content: "<- BORING!"; 
 
    color:  red; 
 
}

<p class="boring-text">Here is some good old boring text.</p> 
 
<p>Here is some moderate text that is neither boring nor exciting.</p> 
 
<p class="exciting-text">Contributing to MDN is easy and fun. 
 
Just hit the edit button to add new live samples, or improve existing samples.</p>

Answer 3

這可能是最容易學習的例子。

div { 
    background: black; 
} 

div:before { 
    content: "i appear before the div "; 
} 

div:after { 
    content: " i appear after the div"; 
} 

<div>hello</div> 

輸出：

「你好，我在div後出現DIV之前，我出現了」它通常是好當你之前或喜歡帶圖標按鈕等

元素後插入圖標或圖片使用