在網頁設計中，我們經常需要將文字橫跨在一條線上，用來表現一些特殊的標題或者注明。這時候，我們可以使用CSS來實現。

實現如下：
.heading {
background-color: black;  // 橫線背景顏色
color: white;  // 文字顏色
display: inline-block;
padding: 0 20px;  // 文字與橫線的間距
position: relative;  // 相對定位
}
.heading::before {
content: '';  // 前綴設為空
border-top: 2px solid black;  // 橫線樣式
height: 1px;  // 橫線高度
position: absolute;  // 絕對定位
top: 50%;  // 線條垂直居中
width: 100%;  // 橫線寬度
z-index: -1;  // 將線條置于底部
}

上述CSS代碼實現了單行文本在橫線上的效果。我們可以在HTML中加入一個class為"heading"的標簽，然后在里面填寫需要顯示的文本即可。

這種效果常用于重要標題的突出展示，或者頁面元素的注明等場景。