html - 用 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。 .