CSS橫線中間出現文字是一種常見的網頁設計效果，它可以在網頁中起到強調、分割、標記等作用。下面我們將介紹如何用CSS實現這一效果。

<hr>
<p class="middle-line">這段文字會出現在橫線中間</p>

首先，我們需要在HTML中添加一條<hr>橫線。接著，在<p>標簽中添加一個自定義的class名稱，比如“middle-line”。然后，在CSS中定義中間橫線的樣式：

.middle-line {
position: relative; /*相對定位*/
}
.middle-line::before {
content: ""; /*偽元素*/
position: absolute; /*絕對定位*/
top: 50%; /*距上方50%*/
border-top: 1px solid #000; /*橫線樣式*/
width: 100%; /*橫線長度*/
z-index: -1; /*在文本底下*/
}

以上CSS中，我們用到了CSS的相對定位和絕對定位，以及偽元素::before來實現此效果。其中，“content: ''”是一個不可省略的屬性，用于定義偽元素的內容。然后，我們將橫線放在文本的正中間，通過“top: 50%”讓它距離上方50%的位置。最后再通過“z-index: -1”將它置于文本后面，完成中間橫線的效果。

最后，我們只需要在CSS中定義“middle-line”類的字體樣式即可。當然，你也可以根據需求增加其它的效果，比如顏色、粗細、虛線等等。