Блог

У меня есть класс, зависящий от контекста, который я хочу использовать для определенных заголовков на сайте, и я использую следующий код для применения строки полной ширины 2px под заголовком:-

 .headingCustom2 {
  
  color:black; 
  text-align: center; 
  padding-top: 50px; 
  border-bottom: 2px solid #000; 
  padding-bottom: 3px;

}
 

Я хочу добавить отступ размером 20 пикселей под подчеркиванием, чтобы между ним и div ниже было пространство. Он должен быть независимым от отступов: снизу. Мой поиск вернул результаты только для padding-bottom, который изменяет расстояние между заголовком и подчеркиванием. Хотел сохранить его в отдельном классе, поскольку на сайте много заголовков, к которым его нужно будет применить. Шрифт заголовка, заголовок 5, также используется в других контекстах без подчеркивания. В любом случае, я надеюсь, что этот вопрос не слишком утомителен.

Вы можете попробовать использовать ::after

 .headingCustom2::after {
    content: '';
    display: block;
    height: 20px;
}