伪元素
::before/::after/::first-line/::first-letter/::selection 伪元素
伪元素
伪元素创建"虚拟"元素——::before 和 ::after 是最常用的两个。
学完本章你将： 掌握 ::before/::after/::first-line/::first-letter/::selection。
::before / ::after
css
/* 必须设置 content 才生效 */
.quote::before {
content: "「";
}
.quote::after {
content: "」";
}实用场景
css
/* 清除浮动 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* 必填标记 */
.required::after {
content: " *";
color: red;
}
/* 列表装饰 */
.item::before {
content: "→ ";
color: #4CAF50;
}
/* 图标 */
.external-link::after {
content: " ↗";
font-size: 0.8em;
}::first-line / ::first-letter
css
p::first-line { font-weight: bold; } /* 首行 */
p::first-letter {
font-size: 3em;
float: left;
color: red;
} /* 首字下沉 */::selection
css
/* 用户选中文字时的样式 */
::selection {
background: #FFD700;
color: #333;
}