在網頁制作中，我們經常會使用css來控制元素的樣式，時而我們會碰到這樣一個需求：讓一條線兩端都有一定的間距。這時我們可以使用偽類來實現這個效果。

.line {
height: 2px;
background-color: black;
position: relative;
}
.line::before,
.line::after {
content: "";
position: absolute;
top: -1px;
width: 10px;
height: 2px;
background-color: white;
}
.line::before {
left: 0;
}
.line::after {
right: 0;
}

這里我們創建的.line是一條黑色的橫線，通過偽類::before和::after來實現兩端的空白。通過設置后代選擇器content來添加“ ”到偽元素中，實現空白的效果；position: absolute將其脫離文檔流使其可以在父元素中自由定位；top: -1px將兩個偽元素填充到line的上面，避免出現懸浮的問題。

最后，我們設置::before的left: 0和::after的right: 0，使兩個偽元素分別在line的兩端顯示，從而實現了一條線兩端有間距的效果。