Псевдоэлемент реализация ::before?

Question

как реализовать такой псевдоэлемент для #success

#success::before {
    content: "-";
    color: green;
    width: 8px;
    height: 8px;
    background: green;
    border-radius: 50%;

}

 <div id="success">Success</div>

Answer 1

<div id="success"> &nbsp;Success</div>

body {
  font-size: 20px;
  font-family: sans-serif;
}

#success::before {
    content: '';
    display: inline-block;
    color: green;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgb(100 195 137);
}

Answer 2

Чтобы размеры для блока работали нужно задать элементу display: inline-block или display: block:

#success::before {
  content: "";
  display: inline-block;
  margin-right: .5em;
  border: .25em solid green;
  border-radius: 50%;
}

<div id="success">Success</div>

БЛОГ НА HUSL

Псевдоэлемент реализация ::before?

Ответы (2 шт):