最近老是用到这些不怎么常用的样式,写下来便于记住。
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 为空。