CSS設置垂直線

在網頁設計中，垂直線的作用十分重要，可以用來分割內容，使頁面更加清晰易懂。下面介紹如何使用CSS來設置垂直線。

首先，我們可以使用border屬性設置垂直線，代碼如下：

.vertical-line {
border-left: 1px solid #666;
}

以上代碼將在左側創建一個寬度為1像素、顏色為#666的實線垂直線。我們可以將該CSS樣式應用于HTML元素中，例如：

<div class="vertical-line"></div>

除了使用border屬性，還可以使用偽元素:before或:after來實現垂直線的效果，代碼如下：

.vertical-line::before {
content: "";
display: inline-block;
width: 1px;
height: 100%;
background-color: #666;
margin-right: 10px;
}

以上代碼將在元素內容前面創建一個寬度為1像素、高度與元素相同、顏色為#666的實線垂直線。我們可以將該CSS樣式應用于HTML元素中，例如：

<p class="vertical-line">這是一段帶有垂直線的文本</p>

通過以上兩種方法，我們可以實現不同形式、不同樣式的垂直線，從而使網頁更加美觀和易讀。