垂直水平線在網頁設計中非常常見，它可以幫助我們更好地組織頁面布局，使頁面看起來更加美觀和專業。在 CSS 中，我們可以使用兩種方式實現垂直水平線：使用偽元素和使用背景圖像。

使用偽元素

.line {
position: relative;
}
.line::before {
content: "";
position: absolute;
top: 50%;
left: 0;
margin-top: -1px;
width: 100%;
border-top: 1px solid #ccc;
}
.line::after {
content: "";
position: absolute;
top: 0;
left: 50%;
margin-left: -1px;
height: 100%;
border-left: 1px solid #ccc;
}

首先，我們需要給包含垂直水平線的元素設置position: relative;。接下來，使用::before偽元素創建垂直線，并使用::after偽元素創建水平線。

使用背景圖像

.line2 {
background: url(line.png) repeat-y left top;
border-left: 1px solid #ccc;
padding-left: 10px;
}

使用背景圖像的方式也非常簡單，我們只需要設置包含垂直線的元素的背景圖像為一條細長的豎線，并在左側使用border-left屬性設置一條細線作為補充。

以上就是使用 CSS 實現垂直水平線的兩種方法，根據不同情況可以選擇不同的方式。需要注意的是，為了使網頁更具可訪問性，在使用偽元素方式時需要添加適當的 ARIA 標記。