如何使用CSS添加標題下的分隔線

h1::before{ content: “”; display: block; width: 48px; height: 5px; background: #333; margin-bottom: 10px;}

一、CSS content屬性的使用

在CSS中，可以使用content屬性來插入生成的內容，這個屬性只能在::before和::after偽元素中使用，而且必須與display屬性一起使用。

代碼示例：

h1::before {
  content: "";
  display: block;
  width: 48px;
  height: 5px;
  background: #333;
  margin-bottom: 10px;
}

二、偽元素及其作用

偽元素（pseudo-element）是指在HTML文檔中不存在的元素，但是可以通過CSS來創建這些「虛擬」的元素。偽元素分為兩種，一種是::before偽元素，另一種是::after偽元素，也就是說，這兩種偽元素都可以在元素的前面或後面添加內容。

在本文的示例中，我們使用::before偽元素在<h1>標籤之前添加了一個黑色的長條作為標題下面的分隔線。

三、CSS display屬性的用法

在CSS中，display屬性用來控制元素的顯示方式，該屬性可以取多個值，如none、block、inline等等。其中，::before偽元素的默認display值為inline，需要通過將display屬性設置為block來使其成為塊級元素。在本文的示例中，我們使用display: block;使得::before偽元素成為了塊級元素。

四、小標題

1、代碼示例中添加自定義樣式

在上述示例中，我們將分隔線作為標題下的一部分，如果我們需要為標題和分隔線添加自定義樣式，可以通過為標題和分隔線分別添加樣式來實現。

h1 {
  font-size: 2em;
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

h1::before {
  content: "";
  display: block;
  width: 48px;
  height: 5px;
  background: #333;
  margin: 0 auto;
  margin-bottom: 10px;
}

h3 {
  font-size: 1.2em;
  color: #666;
  margin-bottom: 10px;
}

2、小標題的使用

在文章中，小標題可以起到分段和分類的作用，同時也可以吸引讀者的眼球。在前面的示例中，我們僅僅使用了一個小標題，但是在具體的應用過程中，我們應該根據文章結構和內容來選擇合適的小標題。

五、總結

在本文中，我們主要介紹了如何使用CSS添加標題下的分隔線，包括content屬性的使用、偽元素及其作用、display屬性的用法、小標題的使用等。通過本文的學習，希望讀者可以更好地掌握CSS的使用技巧，同時也能夠更好地應用到實際的項目中。