:before / :after

　　最近老是用到这些不怎么常用的样式，写下来便于记住。

　　1. 选择器 :before

<style>
    ul{border: 1px solid #CCCCCC;}
    ul li{list-style: none;position: relative;width:300px;height: 100px;padding-left: 100px;}
    ul li:before{
        content: "/content/";
        display: inline-block; 
        width: 4px;
        height: 4px;
        background-color:gold;
        position:absolute;
        left:0px;
        top:10px;
        border-radius: 50%;
        /*z-index:2;*/  /* 如果在页面中显示不出来可能是被遮盖*/
    } 
</style>

<ul>
    <li>【这是before的示例】</li>    
    <li>123end</li>
</ul>

　　content 可为空。

　　2.选择器 :after

<style>
    ul{border: 1px solid #CCCCCC;}
    ul li{list-style: none;position: relative;width:300px;height: 100px;padding-left: 100px;}
    ul li:after{
        content: " ";
        display: inline-block; 
        width: 4px;
        height: 4px;
            background-color:gold;
            /*    position:absolute;
                left:0px;
                top:10px;*/
            border-radius: 50%;
            /*z-index:2;*/  /* 如果在页面中显示不出来可能是被遮盖*/
    } 
</style>

<ul>
    <li>【这是after的示例】</li>    
    <li>123end</li>
</ul>

　　此例中content 为空。

　　

 

转载于:https://www.cnblogs.com/lmxHome/p/8134243.html