定义
伪元素选择器:就是有连续两个冒号的选择器,如::first-line::first- letter、::before 和::after
- E::first-letter文本的第一个单词或字(如中文、日文、 韩文等)
- E::first-line 文本第一行;
- E::selection 可改变选中文本的样式;
- E::before和E::after
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
p::first-letter { /* 选择第一个字 */
color: red;
font-size: 25px;
}
p::first-line { /* 选择第一行 */
color: green;
font-size: 20px;
}
p::selection { /* 选中变色 */
color: blue;
}
div:before { /* 放在盒子内部的前面 */
content:"一只";
}
div:after { /* 放在盒子内部的后面插入 */
content:"猪";
}
</style>
</head>
<body>
<h1>静夜思</h1>
<p>床前明月光,疑是地上霜。举头望明月,低头思故乡</p>
<div>特立独行的</div>
</body>
</html>
实现效果