在CSS中我們經常會用到水平線（

---

）來分隔內容，但是有時候我們希望在水平線上面或下面添加一些文本，該怎么做呢？ 要在水平線內添加文本，我們可以使用偽元素來實現，就是在hr標簽的before或after偽元素中添加CSS樣式。下面是實現方式的代碼：

hr:before {
content: "文本"; /*要添加的文本*/
display: inline-block; /*把偽元素轉為行內元素，使文本在水平線上*/
margin: 0 10px; /*為了美觀，添加一些間距*/
vertical-align: middle; /*使文本居中顯示在水平線上*/
}

上面的代碼中，我們首先通過before偽元素添加了需要的文本“文本”，然后設置display屬性為inline-block，使偽元素轉為行內元素，使文本能夠在水平線上顯示，并通過margin添加了一些間距。最后，通過vertical-align屬性把文本垂直居中顯示在水平線上。 同樣的方式，我們也可以通過設置hr標簽的after偽元素來在水平線下方添加文本。代碼如下：

hr:after {
content: "文本";
display: inline-block;
margin: 0 10px;
vertical-align: middle;
}

最后，我們需要注意的是，這種方法只適用于添加簡單的文本，如果想要添加復雜的內容，建議使用其他方式實現。