內嵌CSS可以使用::before和::after偽元素嗎？

查詢內嵌CSS是否允許部署::before且 ::after 偽元素是一個有效的問題。本文深入探討了回答此查詢的細節。

內嵌 CSS 和偽元素

內嵌 CSS 直接駐留在 HTML 元素中，提供了定義 CSS 的替代方案在外部樣式表中。雖然內聯 CSS 達到了其目的，但在考慮偽元素時出現了一個限制。

偽元素 :before 和 :after 是 CSS 的組成部分，有助於在給定元素之前或之後插入內容。然而，這些偽元素需要樣式表聲明，因為內聯 CSS 無法直接定位它們。

使用樣式表實現偽元素

來說明::before 的實作和::after 與樣式表，請參考以下範例：

td { 
    text-align: justify;
}
td::after { 
    content: "";
    display: inline-block;
    width: 100%;
}

在此範例中，內嵌 CSS 屬性 text-align: justify 確保 td 元素內的文字對齊。同時，樣式表中定義的 ::after 偽元素利用延伸到 td 元素寬度的內聯塊來注入一個空字串。