Как вы создаете HTML-миддот?

Итак, в моем HTML я помещаю 3 миддота (точки с вертикальной ориентацией)

· · ·

и я хочу их стилизовать. Я хочу сделать их большими. Я также хочу сделать первую точку белого и наложить вокруг нее синий круговой контур, делая две другие точки серыми.

Любая идея, если это возможно, и если да, как это сделать?

Ответы

Ответ 1

Чтобы сделать их более крупными, используйте свойство font-size в сочетании с line-height. Чтобы стилизовать только первую точку, вам нужно обернуть ее в <span> и стилизовать ее отдельно. Синяя граница может быть достигнута с помощью свойства text-shadow:

div {
  font-size: 5em;
  line-height: .4em;
  color: gray;
}

div>span {
  text-shadow: 0px 0px 4px blue;
  color: white;
}
<div><span>&middot;</span>&middot;&middot;</div>