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

Как сделать этот круг меньше? Я попытался уменьшить круг по ширине и высоте, но это не сработало. Что делать?

0
user3029229 21 Дек 2013 в 21:18
1
В качестве альтернативы: используйте символ круга . Обычно это соответствует вашему шрифту и наследует любой стиль шрифта.
 – 
Mouagip
21 Дек 2013 в 21:40

1 ответ

Лучший ответ

Сначала удалите символ табуляции из содержимого, затем укажите display: inline-block, удалите отступы и установите для width и height одно и то же желаемое значение.

Живой пример: http://codepen.io/anon/pen/Iyeth

Проблема в вашем коде заключается в том, что псевдоэлемент является встроенным , поэтому ширина и высота зависят от его содержимого и других свойств, таких как font-size.

3
Carlo Cannas 21 Дек 2013 в 21:22
Когда я удаляю текст из содержимого, он игнорирует радиус границы. И почему мне нужно удалять отображение?
 – 
user3029229
21 Дек 2013 в 21:27