在 CSS3 中，为了区分伪类和伪元素，规定伪元素使用2个冒号
:first-line 向文本的首行设置特殊样式 :first-letter 向文本的首字母设置特殊样式 只用于块级元素
::before ::after 在元素内容前后插入新内容
content属性指定要插入的内容 且必须设置content：“”（空值也可） 插入的内容默认是inline元素 伪元素的content 属性可以是：url-设置某种媒体（图像，声音，视频等内容），string-设置Content 到你指定的文本
缺点：
1.伪元素不真正在文档内容中体现，只在视觉效果上体现，所以不能给伪元素添加具有实际意义的内容，这部分内容不会搜索引擎抓取
用处
1）清除浮动
(父盒子里的子元素均设置了浮动，不占标准流，使其父盒子的高度为0，就需要清除浮动，让父容器变得可以自动"清理"（clearing）子元素的浮动，从而能够识别出浮动子元素的位置，不会出现显示上的差错。)
.div::after { content:""; height:0; display:block; clear:both; }
2）添加小图标
经常与定位一起使用
3）实现导航栏中鼠标悬停上划线滑出效果
HTML
<div class="navone"> <p><a href="#">学生</a></p> <p><a href="#">教职工</a></p> <p><a href="#">校友</a></p> <p><a href="#">访客</a></p> <p><a href="#">招聘</a></p> <p><a href="#">捐赠</a></p> </div>
CSS
> .navone { display: flex; } .navbar p { height: 45px; > line-height:45px; margin:0px; margin:0 10px; font-size: 14px; } > > /*CSS3鼠标滑过导航出现下划线动画特效 */ > .navbar a::before{ > opacity: 1; > content:""; > width:0; > position: absolute; > border-top:3px solid white; > top:-3px; > left:0%; > transition: width .2s ease-in-out; } .navbar a:hover::before { > width:100%; > }
