[FIXED] How to put bull inside css circle

Issue

I need to create a line with a few circles inside and with a dot inside these circles.. They should look like radio buttons - how can I align the dot vertically?

JSfiddle

HTML

<div class="round" id="round-vertically">
                <div class="circle img1" id="circle-star"><span>&bull;</span></div>
                <div class="circle-line"></div>
                <div class="circle img2" id="circle-key"><span>&bull;</span></div>
                <div class="circle-line"></div>
                <div class="circle img3" id="circle-cursor"><span>&bull;</span></div>
                <div class="circle-line"></div>
                <div class="circle img4" id="circle-mobile"><span>&bull;</span></div>
</div>

Solution

Don't use characters, create it by css:

HTML:

<div class="eye"></div>

CSS:

.eye{
  border: 2px solid red;
  border-radius: 100%;
  position: relative;
  width: 2em; height: 2em;
}
.eye::before{
  content: "";
  display: block;
  position: absolute;
  width: 1em; height: 1em;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: red;
  border-radius: 100%;
}

http://codepen.io/anon/pen/ZOaBKg

Answered By - Michał Sadowski

Answer Checked By - David Marino (PHPFixing Volunteer)