9.1 偽元素 ::before 和 ::after
偽元素 ::before 和 ::after 是 CSS 中很強大的工具，它們允許在不改變 HTML 的情況下在元素內容之前或之後添加裝飾性元素。它們廣泛應用於創建視覺效果、改善用戶界面和為元素添加樣式。
描述：
::before: 偽元素，添加在元素內容之前::after: 偽元素，添加在元素內容之後
語法：
element::before {
/* 為偽元素設置的樣式 before */
}
element::after {
/* 為偽元素設置的樣式 after */
}
主要屬性
偽元素 ::before 和 ::after 幾乎可以包含任何 CSS 屬性，包括顏色、大小、定位、背景、陰影等等。然而，要讓偽元素可見，必須為它設置內容和大小。
content: 設置偽元素的內容。可以是文字或圖片，也可以是空字符串display: 設置偽元素的顯示類型。通常使用block或inline-blockposition: 控制偽元素的定位（例如，absolute或relative）width和height: 設置偽元素的尺寸
9.2 添加文本
通過使用 content 屬性，可以輕鬆地在任何元素的開始或結尾添加文本。
CSS
.example::before {
content: "開始: ";
color: blue;
}
.example::after {
content: " :結束";
color: red;
}
HTML
<body>
<p class="example">這是一個示例文本</p>
</body>
代碼說明：
.example::before: 在元素內容之前添加文字 "開始: " 並將其顏色設為藍色.example::after: 在元素內容之後添加文字 " :結束" 並將其顏色設為紅色
9.3 裝飾線
還可以添加裝飾線來框住內容：
CSS
.decorative-line::before,
.decorative-line::after {
content: "";
display: block;
height: 2px;
background: black;
margin: 10px 0;
}
HTML
<body>
<div class="decorative-line">帶有裝飾線的文本</div>
</body>
代碼說明：
.decorative-line::before: 在元素內容之前創建裝飾線.decorative-line::after: 在元素內容之後創建裝飾線
9.4 插入圖標
不夠文字？那麼很容易就可以插入幾個圖標：
CSS
.icon::before {
content: url('https://via.placeholder.com/20');
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
HTML
<body>
<p class="icon">帶有圖標的文本</p>
</body>
代碼說明：
.icon::before: 使用圖片的 URL 在文本之前添加圖標
9.5 複雜的裝飾元素
我們再來加一些複雜的裝飾：
CSS
.complex-decor::before {
content: "";
display: block;
width: 50px;
height: 50px;
background: linear-gradient(45deg, #f06, transparent);
position: absolute;
top: -10px;
left: -10px;
}
.complex-decor {
position: relative;
padding: 20px;
background: #eee;
margin: 20px;
}
HTML
<body>
<div class="complex-decor">帶有裝飾角的元素</div>
</body>
代碼說明：
.complex-decor::before: 使用漸變和絕對定位在主要內容前創建裝飾元素.complex-decor: 設定父元素的相對定位，以便偽元素可以相對於它進行定位
9.6 使用動畫
甚至可以添加動畫效果：
CSS
.animated::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: red;
animation: rotate 5s infinite;
margin: 20px auto;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
HTML
<body>
<div class="animated"></div>
</body>
代碼說明：
.animated::before: 創建一個方形的偽元素並利用關鍵幀動畫旋轉它
GO TO FULL VERSION