css的伪元素

 前言

    层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。“伪元素”不会显示在文档流中，一般我们用firefoxbug也是查看大、不到的，但却可以为我们实现一些很有用的样式或者功能。

最常用的伪元素

   分别有 a:link{} /**未访问时的状态**/

              a:visited  /**已访问过的状态**/

               a:hover  /**鼠标移到链接上时的状态**/

              a:active   /**鼠标按下去的状态**/

              : before    /**在一个元素的内容之前添加内容**/

             ：after      /**在一个元素的内容之后添加内容**/

下面主要说一下a:hover 和:before  和：after
（1）a:hover
       a:hover{
           position: relative;
           display: inline-block; 
           outline: none; 
           text-decoration: none;   color: #000;   font-size: 32px;  
      }
（2）：before
      div.test：before{
           content: "↗"; /**使用引号包括一段字符串，将会向元素内容中添加字符串**/
           content:"(" attr(href) ")";   、/**调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来**/
           content:url('my.jpg');          
      }
（3）：after
      div.test：after{
           content: "↗"; /**使用引号包括一段字符串，将会向元素内容中添加字符串**/
           content:"(" attr(href) ")";   、/**调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来**/
           content:url('my.jpg');          
      }

集合以上三个做一个简单的例子
除了简单的添加字符，配合 CSS 强大的定位和特效特性，完全可以达到给简单的元素另外附加最多两个容器的效果。有一点需要注意的是，如果不需要内容仅配合样式属性做出效果，内容属性也不能为空，即 content:”" 。否则，其他的样式属性一概不会生效。



这种很炫的效果就可以很简单的实现了
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; }