html - 在圆圈内创建三个垂直点(省略号)

Question

我要画圈<div> ，就像这张图片:

我试过这段代码。

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

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

我怎样才能正确地做到这一点？

Answer 1

您可以将 :after 伪元素与 content: '•••' 和 transform: rotate 一起使用。请注意，这是 the bullet HTML special character •，或\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>