создание: после элемента/div

Question

Я хочу создать нижнюю панель под названием h3. Я не хочу использовать border-bottom из-за отсутствия функций настройки. У меня также нет полного контроля над тем, когда заголовок h3 создан, поэтому я не могу делить под моим html.

, что я пытаюсь к нам

CSS

.page-widgt h3 { 
    position: relative; 
    font-weight: 700; 
    color: #42b4c4; 
    font-size: 2em; 
    letter-spacing: -1px; 
    line-height: 1em; 
    margin-bottom: 25px; 
    padding: 0 30px 15px 0; 
} 

.page-widgt h3:after { 
    position: relative; 
    display: block; 
    width: 50px; 
    height: 3px; 
    background-color: #000; 
} 

но ничего не показывает вверх

Answer 1

Добавить content:"" для :after

.page-widgt h3:after { 
    position: relative; 
    display: block; 
    width: 50px; 
    height: 3px; 
    background-color: #000; 
    content:""; 
}