S CSS стиль для реализации маленькой точки - PullRequest
Новая
       1

S CSS стиль для реализации маленькой точки

0 голосов
/ 05 марта 2020

Я хочу иметь точку зеленого цвета в моем представлении. Я хочу установить точку на компоненте ion2-calender. То, что я пробовал, это написать как css, чтобы. Зеленый цвет идет, но ди git идет вниз. Пожалуйста, помогите мне, чтобы ди git 14 не go вниз, enter image description here

  button.days-btn.dot:before{

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


  }

1 Ответ

2 голосов
/ 05 марта 2020

Используйте 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>
...