CSS中:after和:before属性个人理解

在css中属性有:before和:after这两个伪元素，:before伪元素中添加的样式属性在Dom元素的前面显示。而:after伪元素中添加的样式属性在Dom元素的后面进行显示。content属性一般配合:before和:after这两个伪元素一起使用。（备注：第一次写博客，请不要喷～～）

例：

　　CSS样式：

　　　　body{
  　　　　　　margin:40px auto;
  　　　　　　width:400px;
  　　　　　}
  　　　ol{
            counter-reset: li;
            list-style: none; /*去掉li前面的序号*/
            *list-style: decimal;
            font: 15px 'trebuchet MS', 'lucida sans';
   　　　padding: 0;
   　　　color:#0000FF;
  　　}
  　　ol ol{
   　　　　margin:0 0 0 2em;
  　　}
  　　#ListDemo a{
  　　　　 position:relative;
  　　　　 display:block;
   　　　　padding:.4em .4em .4em 2em;
   　　　　*padding: .4em;
   　　　　border:1px solid #666;
   　　　　background:#999;
   　　　　color:#CCCCCC;
   　　　　text-decoration:none;
   　　　　margin:.5em 0;
   　　　　-webkit-border-radius:.2em;
  　　　　 -webkit-transition: all .3s;
 　　 }
  　　#ListDemo a:hover{
  　　　　 background:#CCCCCC;
  　　 }
 　　 #ListDemo a:before{
  　　　　 /*content:counter(li);li中的序号将会显示出来，需要将ol包含在li中*/
   　　　　content:attr(li);/*li中的序号将不会被显示出来*/
   　　　　counter-increment:li;
   　　　　position:absolute;
   　　　　left:-2em;
   　　　　top:50%;
   　　　　margin-top:-1.3em;
   　　　　background:#87ceeb;
  　　　　 width:2em;
  　　　　 height:2em;
  　　　　 line-height:2em;
  　　　　 border:4px solid #fff;
  　　　　 font-weight:bold;
   　　　　text-align:center;
   　　　　-webkit-border-radius:2em;
   　　　　-webkit-transition:all .3s;
   　　}
  　　#ListDemo a:hover:before{
   　　　　transform:rotate(360deg);
   　　　　-webkit-transform:rotate(360deg);
   　　}
  　　#ListDemo a:after{
  　　　　 content:"";
   　　　　top:45%;
   　　　　left:0.3em;
  　　　　 position:absolute;
   　　　　border:3px solid transparent;
   　　　　-webkit-transition:all .3s;
   　　} 
  　　#ListDemo a:hover:after{
  　　　　 border-left-color:#87ceeb;
   　　}

　　HTML

　　　　<ol id="ListDemo">
         <li>
             <a>Frist List Demo</a>
            </li>
            <li>
             <a>Frist ListDemo</a>
            </li>
            <li>
             <a>Frist List Demo</a>
           
            </li>
            <ol>
                <li>
                    <a>second List Demo</a>
                </li>
                <li>
                    <a>second List Demo</a>
                </li>
            </ol>
          
            <li>
             <a>Frist List Demo</a>
            </li>
        </ol>

转载于:https://www.cnblogs.com/xianbaby/archive/2013/01/08/2851492.html