圈與CSS

Question

HTML：

 <ul class="list_header"> 
      <li><a href="#">06 december 2013</a></li> 
      <li><a href="#">item2</a></li> 
      <li><a href="#">item3</a></li> 
      <li><a href="#">item4</a></li> 
      <li><a href="#">item5</a></li> 
      <li><a href="#">item6</a></li> 
     </ul> 

CSS：

.list_header{ 
    font: italic 70% Georgia; 
    margin: 15px 0 0 15px; 
} 
.list_header li{ 
    display: inline-block; 
} 
.list_header a{ 
    color: #bbb; 
    text-decoration: none; 
} 
.list_header li:first-child :after{ 
    content: '/t'; 
    height: 3px; 
    border-radius: 50%; 
    background: #bbb; 
    padding: 0px 0px 0px 5px; 
    margin: 0px 0px 0px 5px; 
} 

http://codepen.io/hristofor/pen/aILlC

如何使這個小一圈？ 我試圖讓寬度和高度較小的圓形，但沒有奏效。 怎麼辦？

Answer 1

首先從內容中刪除製表符，然後指定display: inline-block，刪除填充並將width和height設置爲相同的期望值。

直播例如：http://codepen.io/anon/pen/Iyeth

在代碼的問題是，僞元件是直列，所以寬度和高度從其內容和其它性質等font-size依賴。