Annie The Cross Annie The Cross - 4 months ago 34
HTML Question

How to put bull inside css circle

I need to create line with few circle inside and with dot inside these circles.. It should be look like radio buttons - how can I make the dot vertical align?

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>

Answer

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