在網頁設計中，經常會用到橫線來分割不同的內容區域，但是有時候這些橫線看起來比較單調。可以通過在中間加上一些文字，使得橫線更加有意義和豐富。下面介紹一種實現方法。

.hr-text {
display: flex;
align-items: center;
text-align: center;
}
.hr-text::before,
.hr-text::after {
content: '';
flex: 1;
border-bottom: 1px solid #ccc;
}
.hr-text::before {
margin-right: .25em;
}
.hr-text::after {
margin-left: .25em;
}

如上面的代碼所示，首先需要創建一個名為"hr-text"的class，并設置其display屬性為flex，這樣它的子元素就可以沿著橫向排列。接下來在該元素的偽元素中分別加入兩個邊框，用來形成橫線的效果。其中，::before偽元素在右側加入橫線，::after偽元素在左側加入橫線。需要注意的是，在兩個偽元素中間需要加上一個margin，用來區分橫線和文字之間的間距。

現在，只需要在hr-text元素中添加需要顯示的文字即可。修改實現的例子如下：

<div class="hr-text">網頁設計</div>

文本可以任意更改，通過上述的CSS樣式可以自適應寬度。所以，當在不同的設備上查看頁面時，橫線和文字的長度不同，但它們的位置和間距是始終不變的。