今天发现很多国外的网站和框架设计都用到了before和after,之前使用的比较少,今天试了下觉得还是很有意思的~
 
说明
 
1. :before 和 :after将在内容元素的前后插入额外的元素;:before将会在内容之前“添加”一个元素而:after将会在内容后“添加”一个元素。在它们之中添加内容我们可以使用content属性。
 
2. :before 和 :after发布于CSS2.1, 在css3中修订后伪元素使用::,伪类使用:, 因而形式为:: before, ::after
 
3. 无论使用单引号还是双引号都能识别,但是IE8只支持单冒号格式,因而为兼容还是使用单冒号
 
 
 
简单例子
 
    .div1:before{
        content:open-quote;
    }
    .div1:after{
        content:close-quote;
    }
    <div class="div1"> Today is a wonderful day. Wish you happy~</div>
结果:
 
“ Today is a wonderful day. Wish you happy~”
 
 
设置伪元素样式
 
eg1:
 
    .div1{
        width:500px;
        height:200px;
        margin:100px auto;
        background-color:#F0F0F0;
        line-height:200px;
        text-align:center;
    }
     .div1:before{
        content:open-quote;
        position:relative;
        font-size: 24pt;
        line-height:200px;
        text-align:center;
        color:#fff;
        background:#ddd;
        border-radius:25px;
        
    }
    .div1:after{
        content:close-quote;
        position:relative;
        font-size: 24pt;
        background:#ddd;
        border-radius:25px;
        line-height:200px;
        text-align:center;
        color:#fff;
    }
 
    <div class="div1"> Today is a wonderful day. Wish you happy~</div>
结果:
 
 
 
注意:实际使用时注意将相同的css抽取,div[class*='']:before, div[class*='']:after 
 
eg2:(与伪类结合使用)
 
添加样式:
 
    .div1:hover:after,.div1:hover:before {
         background-color: #555;
        }