SCSS样式实现一个小点

Question

我想在我的视野中有一个绿色的点。 我想在ion2-calender组件上设置一个点。我试图写一个scss。绿色即将来临，但数字越来越低。请帮助我，使数字14不会下降，

  button.days-btn.dot:before{

  content: '\25CF';
  font-size:25px;
  color:green;


  }

Answer 1

使用position:absolute处理框中的点位置。

div.container {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

div.container span {
  position: relative;
  width: 40px;
  max-height: 40px;
  line-height: 40px;
  border:1px solid #ccc;
  text-align: center;
}

div.container span.green-dot:before {
  content:'';
  position: absolute;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background: green;
  top: 2px;
  left: 50%;
  transform: translate(-50%);
}

<div class="container">
  <span>1</span>
  <span>2</span>
  <span class="green-dot">3</span>
  <span>4</span>
  <span>5</span>
</div>