伪元素:
代码语言：javascript复制CSS 伪元素用于设置元素指定部分的样式作用:
代码语言：javascript复制1.设置元素的首字母、首行的样式
2.在元素的内容之前或之后插入内容
::first-line 伪元素:用于向文本的首行添加特殊样式。
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
您可以使用 ::first-line 伪元素将特殊效果添加到文本的第一行。一些更多的文字。越来越多，越来越多，越
来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多。注意：::first-line 伪元素只能应用于块级元素。
代码语言：javascript复制::first-letter 伪元素用于向文本的首字母添加特殊样式。
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
您可以使用 ::first-letter 伪元素为文本的第一个字符添加特殊效果！注意：::first-letter 伪元素只适用于块级元素。
代码语言：javascript复制::before 伪元素可用于在元素内容之前插入一些内容。
h1::before {
content: url(/i/photo/smile.gif);
}
这是一个标题
::before 伪元素在一个元素的内容之前插入内容。
这是一个标题
::after 伪元素可用于在元素内容之后插入一些内容。
h1::after {
content: url(/i/photo/smile.gif);
}
这是一个标题
::after 伪元素在一个元素之后插入内容。
这是一个标题
::selection 伪元素匹配用户选择的元素部分。
::-moz-selection { /* 针对 Firefox 的代码 */
color: red;
background: yellow;
}
::selection {
color: red;
background: yellow;
}
请选择本页中的文本：
这是一个段落。
这是 div 元素中的文本。
注释：Firefox 支持可供替代的 ::-moz-selection 属性。伪元素清除浮动:
代码语言：javascript复制需要设置浮动元素父级元素class属性为clearfix
通过设置.clearfix::after样式清除浮动,如下:
.clearfix::after {
/*在content属性中展示一个“.”是一种清除浮动规范*/
content: ".";
/*把伪元素转化为块级元素，清除浮动的墙必须是块级元素*/
display: block;
/*清除浮动*/
clear: both;
/*清除浮动的优化操作*/
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
}
