一些伪类：after和：before的用法

CSS中存在一些比较特殊的属性，称之为伪类所有主流浏览器都支持 :after 伪元素，但对于IE来说，只有IE8以上版本支持。

进入正题：

1.制作关闭按钮

html:

<div style="height: 100px; width: 100px; border: 1px solid black; position: relative;">    <span class="close"></span></div>

css：

.close {       display: block;       background: orange;       color: red;       border-radius: 12px;       line-height: 20px;       text-align: center;       height: 20px;       width: 20px;       font-size: 18px;       padding: 1px;     }   .close:after,.close:before {       content: "";        width: 20px;       height: 2px;       background: #fff;       display: block;       position: absolute;       left: 0;       top: 0;    }    .close:after {       transform: rotate(45deg);    }        .close:before {       transform: rotate(-45deg);    }

效果：

2.清除浮动

3.特效妙用

鼠标移上链接，出现方括号：

a {    position: relative;    display: inline-block;    outline: none;    text-decoration: none;    color: #000;    font-size: 32px;    padding: 5px 10px;}a:hover::before, a:hover::after { position: absolute; }a:hover::before { content: "\5B"; left: -20px; }a:hover::after { content: "\5D"; right:  -20px; }

效果：

4.制作背景小图标

效果：

第一次写博客，写的不好，有什么不对之处，大家指正！