Структурирование DIV элементы под текстом (HTML/CSS)

Question

У меня есть проекты, которые имеют синий бар под текстом в качестве темы, такие как изображения ниже

я в настоящее время были структурирование мой HTML, как это для этих баров:

<div class="Header"> 
     <h4>My Website</h4> 
     <div class="YBlock2"></div> 
</div> 

Где класс CSS определяется как

.YBlock2{ 
background-color:blue; 
width: 50px; 
height: 10px; 
} 

Однако, мне было интересно, если это лучший способ сделать это. Он отлично смотрится на моем компьютере, но я не знаю, является ли это лучшей практикой, когда вы используете сайт для использования на разных экранах и устройствах, или в лучшем случае в целом.

Answer 1

Вы можете использовать pseudo-elements как :after.

h4:after { 
 
    content: ''; 
 
    display: block; 
 
    margin-top: 3px; 
 
    width: 50px; 
 
    height: 10px; 
 
    background-color: blue; 
 
}

<h4>My website</h4>

Answer 2

Вероятно псевдо элемент лучше, но для удовольствия вы могли бы сделать это.

h1 { 
 
    max-width: 50px; 
 
    border-bottom: 3px solid blue; 
 
    overflow-x: visible; 
 
    white-space: nowrap; 
 
}

<h1>Bananas are pretty tasty</h1> 
 
<p>So are pears</p>