CSS中偽元素::before和::after的常見用法

在css中，::before和::after偽元素是非常實用的工具，它們允許我們在不修改html結構的前提下，通過CSS向元素前后插入內容。雖然看起來只是加點小裝飾，但在實際開發中用途很廣。

清除浮動（Clearfix）

這是::after一個非常經典的用法。當內部元素都浮動了，父容器可能會“塌陷”，高度為0。這時候可以用::after偽元素來清除浮動，保證布局穩定。

.clearfix::after {   content: "";   display: block;   clear: both; }

使用時只要給父容器加上這個類名，就能解決高度塌陷的問題。這種做法比額外添加空標簽更干凈，也更容易維護。

添加裝飾性內容或圖標

有時候我們想在文字前或后加一些小圖標、引號、箭頭之類的裝飾性內容，直接寫進HTML不太優雅，用::before或::after就很合適。

立即學習“前端免費學習筆記（深入）”；

比如給鏈接加個外部鏈接的小圖標：

a.external::after {   content: " ?";   font-size: 0.8em;   color: gray; }

或者給引用段落加上引號：

blockquote::before {   content: "“"; } blockquote::after {   content: "”"; }

這樣不僅保持HTML干凈，還能方便地通過CSS控制樣式和顯示邏輯。

創建簡單的形狀或裝飾線條

除了插入文本內容，還可以結合CSS繪制一些小圖形或分隔線。例如，制作一個水平虛線分隔符：

.divider::after {   content: "";   display: block;   height: 1px;   background: repeating-linear-gradient(     to right,     black,     black 2px,     transparent 2px,     transparent 6px   );   margin: 20px 0; }

或者做一個中間帶圓點的橫線分割欄，用在文章章節之間、按鈕組之間等地方都很合適。

樣式增強與狀態提示

有些時候我們需要根據元素的狀態做一些視覺上的變化，比如在必填項后面加個紅色星號，或者在新窗口打開的鏈接上加提示。

例如：

.required::after {   content: "*";   color: red;   margin-left: 4px; }

或者針對某些特定類型的鏈接：

a[target="_blank"]::after {   content: " (新窗口)";   font-size: 0.9em;   color: #666; }

這些小細節提升了用戶體驗，而且完全不需要改動HTML結構。

基本上就這些常見用法。雖然偽元素功能有限，但用好了能大大提升頁面的表現力和代碼的整潔度。關鍵是要理解content屬性是必須的，否則偽元素不會生效。