Почему высота псевдоэлемента ограничена?

Question

При отображении в браузере высота :after не превышает высоту hr. Почему? Как получить необходимую высоту 5x?

.description hr {
  width: 210px;
  height: 1px;
  margin: 0 auto;
  display: block;
  border: 0;
  background: linear-gradient(to right, transparent, #d3d4d7 25%, #D3D4D7 75%, transparent);
}

.description hr:after {
  content: "";
  margin: 0 auto;
  display: block;
  width: 30px;
  height: 5px;
  background-color: #C4A676;
  border: 1px solid #C4A676;
}

<div class="description">
  <hr>
</div>

Answer 1

Достаточно добавить родительскому элементу overflow: visible:

.description hr {
  margin: 0 auto;
  height: 1px;
  width: 210px;
  border: 0;
  overflow: visible;
  background: linear-gradient(to right, transparent, #d3d4d7 25%, #D3D4D7 75%, transparent);
}

.description hr::after {
  content: "";
  margin: 0 auto;
  display: block;
  height: 5px;
  width: 30px;
  background-color: #C4A676;
  border: 1px solid #C4A676;
}

<div class="description"><hr></div>

БЛОГ НА HUSL

Почему высота псевдоэлемента ограничена?

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