Rishi Rishi - 23 days ago 9
CSS Question

Create three vertical dots (ellipsis) inside a circle

I want to make a circle

<div>
, like this image:

here is the image

I have tried this code.



.discussion:after {
content: '\2807';
font-size: 1em;
background: #2d3446;
width: 20px;
height: 20px;
border-radius: 100px;
color:white;
}

<div class="discussion"></div>





How can I do this correctly?

Answer

You could 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>