How to make a circle with vertical dots inside the circle

Published on Author Code Father
How to make a circle with vertical dots inside the circle?  Create three vertical dots (ellipsis) inside a circle. Like below image.

capture

Just use: after pseudo-element with content: '•••' and transform: rotate. Note that this is the bullet HTML special character , or \u2022.

div {
  position: relative;
  background: #3F3C53;
  width: 50px;
  height: 50px;
  color: white;
  border-radius: 50%;
  box-shadow: 0px 0px 15px 1px #4185BC;
  margin: 50px;}

div:after {
  content: '•••';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  font-size: 15px; 
  letter-spacing: 4px;
  margin-top: 2px;}
<div></div>

 

Comments

comments