::before与::after的使用

今天介绍在前端开发中,会使用到的伪元素::before和::after

介绍两个主要的作用

1.在标签前面或者后面添加元素

 例子1:使用::before和::after在标签前添加线条

观察上面的图可以看到,里面的线条既不连起来,也不包围整个标签,如果全都有边线,且连起来的话,使用table标签加个边框就能解决.

现在制作以上的效果,假设上面有六个li标签,给每个li标签添加上面和左边的边线.

//添加上面的线条
li::before {
    position: absolute;//相对于li标签
    content: "";//必须与before配合使用
    background: #665e57;
    top: -1px;//往上
    width: 80%;//整条线相对于li标签长80%
 　left: 10%;//让左边空出10%,相当于居中了
    height: 1px;
 }

同理,添加左边的线条

//li右边的线条
li:after {
    position: absolute;
    content: "";
    background: #665e57;
    top: 10%;    
    left: 0;
    width: 1px;
    height: 80%;
}

2.清除浮动

原理:首先要显示伪元素,所以使用display:block

然后为伪元素加入空内容,以便伪元素中不会有内容显示在页面中,所以使用 content:" "；

最后,要清除所有的浮动,所以使用clear:both

标签名::before {
    content: " ";
    display: block;
　　clear:both;
}

标签名::after {
　　clear:both;
}

注意:要作用于浮动元素的父亲!!