<h2 class="title">這是一個標題</h2>
.title {
  position: relative; /* 設置相對定位,方便控制偽元素位置 */
  padding-bottom: 10px; /* 讓底線與文字之間保持一定距離 */
}

.title::after {
  content: ""; /* 偽元素的內容設為空 */
  position: absolute; /* 絕對定位 */
  left: 0; /* 從標題的左邊開始 */
  bottom: 0; /* 將底線放在標題的底部 */
  width: 50%; /* 底線的寬度,可根據需要調整 */
  height: 3px; /* 底線的厚度 */
  background-color: #000; /* 底線顏色 */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.