Как сделать чтобы появилась линия над написью при помощи ::before?

Question

[sunnyrio]

Должна появиться над 30000 серая линия длиной в 40пикселей но это почему то не происходит, как решить?

.job-card__footer:after{
    content: '';
    width: 40px;
    height: 0;
    border-top: 1px solid #cdcfd2;
    margin: 8px 0;
    order: -1;
}

<div class="job-card__footer">
		<p>30000 руб.</p>
		</div>

Answer 1

[boga-net]

Добавить
display: block;

https://jsfiddle.net/ouodkeLn/205/

Comments

[sunnyrio]

А почему так?

[boga-net]

sunnyrio, Так работает псевдоэлемент и его отображение.

На самом деле, если элемент спозиционировать (как сделал я), то уже не нужен display: block.

Но в вашем случае без position: absolute - нужно.

Answer 2

[string15]

Наверное потому что высота нуль?

Comments

[boga-net]

нет. Рамка в этом случае даст высоту.