CSS可以讓字體中間出現(xiàn)一條豎線，這種效果常用于標題、導航欄、分割線等地方，可以增強頁面的視覺效果。

.text {
position: relative;
display: inline-block;
}
.text::before {
content: "";
position: absolute;
top: 50%;
left: 0;
height: 1px;
width: 100%;
background-color: #000;
transform: translateY(-50%);
}

將需要添加豎線的文本用一個容器包裹起來，設置其為相對定位，并在其`::before`偽元素中添加一個絕對定位的線條。使用`top: 50%`和`transform: translateY(-50%)`可以將線條垂直居中。

設置完CSS后，就可以得到一個樣式如下的效果：

Hello World

.text {
position: relative;
display: inline-block;
}
.text::before {
content: "";
position: absolute;
top: 50%;
left: 0;
height: 1px;
width: 100%;
background-color: #000;
transform: translateY(-50%);
}

需要注意的是，如果豎線的高度太小，可能會在不同的瀏覽器中呈現(xiàn)不同的效果。因此，建議將豎線的高度設置為1px或以上。