CSS 元素之前添加文本 在 CSS 中，我們可以使用 '::before' 或 '::after' 這樣的偽元素來在元素前或元素后添加文本和內容。這些偽元素可以用來為元素添加一些額外的樣式和效果。 例如，我們可以創建一個實心三角形的圖標作為按鈕的前綴： ``` .btn::before { content: ""; border-style: solid; border-width: 0 6px 6px 6px; border-color: transparent transparent #ffffff transparent; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); } ``` 在這個例子中，我們使用了 '::before' 偽元素來創建一個空內容的元素，然后使用 CSS 的邊框屬性來生成一個三角形。我們將其定位到按鈕之上（通過 'position' 和 'top' 屬性），并使用 'transform' 屬性將其水平居中。 另一個常見的應用場景是為圖片添加文字說明： ``` .figure img::after { content: attr(alt); display: block; font-size: 14px; text-align: center; margin-top: 10px; } ``` 在這個例子中，我們使用了 '::after' 偽元素來在圖片下方添加一個塊級元素，并使用 'content' 屬性來獲取圖片的 'alt' 屬性的值。我們使用 'display: block' 讓它成為一個塊級元素，然后使用 CSS 來設置其樣式，比如字體大小、文本對齊方式和上下間距。 需要注意的是，這些偽元素只是在元素內部添加內容，并不會改變元素的布局或大小。如果需要讓它們占據一定的空間，需要為其設置一些樣式，比如 'content' 屬性的值、'display' 屬性的值和 'width'、'height' 等尺寸相關的屬性。 總之，使用 '::before' 和 '::after' 偽元素可以為頁面增加更多的視覺元素和交互效果，同時也提升了頁面的可訪問性和可維護性。代碼中使用 'pre' 標簽可以更好地展示 CSS 的格式和結構，方便閱讀和理解。