Pseudo class ::before - create css circle

Question

I'm trying to create the circle with css, but wan't to use pseudo class ::before

This should be like that (for list of subway stations):

.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;
}

I know that it can be done with additional element before text or with image. But want to know is it possible to use such properties in ::before

Answer 1

You also need to set content, height and display to make it actually render the pseudo element.

Example:

    .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;
    }

<div class="subway-item"></div>

Note: It’s better to write the vendor-specific properties before the standard property (border-radius in your case).