некорректно отображает after content

Question

Дело в том, что я хочу провести линий под текстом с помощью after. content оставляю таким "", но так почему то он плохо отображает(не реагирует на отступы), но как добавляю символ в content сразу работает корректно. Как это может быть взаимосвязано? Есть ли какой-то "Пустой символ"?

Answer 1

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #272727;
  color: #fff;
}

div {
  position: relative;
  width: 100px;
  height: 100px;
  background: orange;
  text-align: center;
}

div.p:after {
  position: absolute;
  content: "";
  width: 100px;
  height: 2px;
  background: red;
  bottom: 5px;
  left: 0;
}

<div class="p">
  Это div
</div>

БЛОГ НА HUSL

некорректно отображает after content

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