@[toc]
1. 偽元素
CSS 偽元素用于設(shè)置元素指定部分的樣式。它是一個附加至選擇器末的關(guān)鍵詞，允許你對被選擇元素的特定部分修改樣式
例如，它可用于：
- 設(shè)置元素的首字母、首行的樣式
- 在元素的內(nèi)容之前或之后插入內(nèi)容
2. 常用偽元素
2.1 元素第一行（::first-line）
作用：作用于元素的第一行
范圍：只能用于塊級元素
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<style>
p::first-line {
color: red;
}
</style>
</head>
<body>
<p>p的第一行<br>
p的第二行</p>
</body>
</html>
-
顯示結(jié)果
image.png
2.2 首字母大寫 （::first-letter）
- 作用：作用于元素的第一個字母
- 范圍：只能用于塊級元素
- 實現(xiàn)
p::first-letter
{
color:#ff0000;
font-size:xx-large;
}
-
結(jié)果顯示
image.png
2.3 元素之前|之后 （::before|after）
- 作用：在每個元素前/后加個東西
- 實現(xiàn)
p::before {content:"xxxx";}
p::after {content:"xxxx";}
加的如果是圖片
p:before {content:url(xxx.gif);}
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>玄德公記事</title>
<style>
p:before {content:"五虎上將：";}
</style>
</head>
<body>
<p>關(guān)羽</p>
<p>張飛</p>
<p>趙云</p>
<p>馬超</p>
<p>黃忠</p>
</body>
</html>
-
結(jié)果顯示
image.png
image.png
