在CSS中,偽元素 ::before 用于在選定元素的內容前插入內容。它常用于添加圖標、文本或裝飾性的元素,而不需要在HTML中實際添加額外的標簽。
以下是一個示例說明 ::before 的用法:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.example::before {content: "★ ";color: gold;font-size: 20px;}</style>
</head>
<body><p class="example">This is an example text.</p>
</body>
</html>
在這個例子中,CSS規則 ::before 將在類為 example 的元素前插入一個金色的星星符號。這樣,你在HTML中只需要定義一段文本,通過CSS可以很容易地在它前面添加圖標或裝飾性的內容。
::before 屬性詳解
content:定義插入的內容,通常是字符串,但也可以是URL、圖片等。
color、font-size 等:可以像常規的CSS屬性一樣進行設置,定義插入內容的樣式。
::before 偽元素對于豐富網頁內容和設計非常有用,特別是在需要在不改變HTML結構的情況下添加裝飾性元素時。