Pseudo class :: before - создать css круг

Я пытаюсь создать круг с помощью css, но wan't использовать псевдокласс :: before

Это должно быть так (для списка станций метро):

.subway-item{
 // css for text item going after circle
 }
.subway-item::before{
   width:15px;
   border-radius: 15px;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   background-color:#69b6d5;
}

Я знаю, что это может быть сделано с дополнительным элементом перед текстом или с изображением. Но хочу знать, можно ли использовать такие свойства в :: before

ОТВЕТЫ

Ответ 1

Вам также необходимо установить content, height и display чтобы он фактически отображал псевдоэлемент.

Пример:

.subway-item::before{
   content: '';
   display: inline-block;
   width: 15px;
   height: 15px;
   -moz-border-radius: 7.5px;
   -webkit-border-radius: 7.5px;
   border-radius: 7.5px;
   background-color: #69b6d5;
}

Примечание. Лучше писать свойства, специфичные для поставщика, перед стандартным свойством (border-radius в вашем случае).