在文本下构建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。

＆＃13;

＆＃13;

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

＆＃13;

<h4>My website</h4>

＆＃13;

＆＃13;

＆＃13;

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>