SCSS样式实现小圆点

【问题标题】：SCSS style to implement a small dotSCSS样式实现小圆点
【发布时间】：2020-06-17 16:25:00
【问题描述】：

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

  button.days-btn.dot:before{

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


  }

【问题讨论】：

如果您可以创建一个可重现的演示，这将能够提供更好的帮助..
将position:absolute 应用于dot:before 和position:relative 应用于点的父级。一旦位置是绝对的，您可以使用top 或left 控制点的位置

标签： css angular ionic-framework sass

【解决方案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>

【讨论】：

@midhunsivarajan 如果有帮助，您可以接受我的回答 :)