伪元素的应用

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