在 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%;
> }