<div>標簽是HTML中的一個容器元素，用于包裹其他HTML元素。同時，<div>標簽也可以通過CSS樣式進行排版和裝飾。在CSS中，我們可以使用偽元素 ::after 來創建一個豎線，使HTML頁面更加美觀和有條理。下面將通過幾個代碼案例來詳細解釋說明。</div>

案例一：

<code>
<style>
.vertical-line::after {
content: "";
border-left: 1px solid #000;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<br>
    <div class="vertical-line"></div>
</code>

上述代碼中，我們使用了一個類名為vertical-line的<div>元素，并在 CSS 樣式中為其創建了一個偽元素::after。通過設置content: "";，我們在偽元素中創建了一個空的內容。

接下來，我們使用border-left屬性設置了一個左邊框，寬度為 1px，顏色為黑色#000，構成了豎線效果。

height屬性定義了豎線的高度為 100px。

通過設置position: absolute;，我們將偽元素的定位方式設置為絕對定位。而left: 50%;和top: 50%;則將偽元素的左上角定位在父元素的中心點。

為了使豎線按照父元素的中心點居中顯示，我們使用transform: translate(-50%, -50%);將偽元素在水平和垂直方向上進行平移。其中，translate(-50%)表示將偽元素的寬度和高度的50%向左和向上平移。

案例二：

<code>
<style>
.vertical-line {
position: relative;
display: inline-block;
padding: 0 10px;
border-right: 1px solid #000;
}
<br>
    .vertical-line:last-of-type {
border-right: none;
}
</style>
<br>
    <div class="vertical-line">Item 1</div>
<div class="vertical-line">Item 2</div>
<div class="vertical-line">Item 3</div>
</code>

在上述代碼中，我們使用了類名為vertical-line的<div>元素，并設置了其父元素的樣式。

，我們將父元素的定位方式設置為相對定位position: relative;，使得子元素可以相對于父元素進行定位。

接下來，為了讓豎線元素在一行內水平排列，我們設置了display: inline-block;。并通過設置padding: 0 10px;為豎線元素添加了水平方向上的內邊距。

通過設置border-right屬性，我們為每個豎線元素都添加了一個右邊框，構成了一系列豎線。

最后，為了去除最后一個豎線元素的右邊框，我們使用.vertical-line:last-of-type選擇器，并將其border-right設置為none。

通過以上兩個案例，我們展示了如何使用<div>元素和 CSS 樣式來創建豎線效果。這些技巧可以在網頁設計中起到點綴和分隔的作用，使頁面結構更加清晰和美觀。