css3 ":: after" псевдоэлемент не работает

Question

Я хочу добавить треугольник после тега div. Поэтому я использовал css3 после псевдоэлемента. Но это не работает. Следующим является мое правило css.

.header-wrapper .part1 ::after { 
    width: 0; 
    height: 0; 
    border-left: solid 48.35px #f21e1e; 
    border-bottom: solid 48.35px transparent; 
    border-top: solid 48.35px transparent; 
} 

Ниже мой HTML часть

<div class="header-wrapper"> 
    <div class="part1"></div> 
</div> 

Answer 1

Для того, чтобы элемент псевдо быть создан, вам нужно specify a content value. В противном случае значение считается принятым по умолчанию, none - что, скорее всего, не работает в вашем случае. (example)

.header-wrapper .part1::after { 
    content: ''; 
    width: 0; 
    height: 0; 
    border-left: solid 48.35px #f21e1e; 
    border-bottom: solid 48.35px transparent; 
    border-top: solid 48.35px transparent; 
} 

На основе CSS вы в курсе, вы должны также удалить пространство между .part1 ::after.