在CSS中，我們可以使用
:after
和
:before
偽類來為元素添加一些文本或者符號。在這兩個偽類中，我們可以使用一個非常有趣的屬性：content。這個屬性用來設置在偽類中生成的內容。
那么，有沒有想過用CSS來給文本的左側或者右側添加一條豎線呢？答案是肯定的。下面我們來看看應該怎么實現。
首先，我們需要為元素設置定位屬性，之后，我們才能在這個元素的左側或者右側添加豎線。下面是一個例子：
.box{
position: relative;
}
.box:before{
content: '';
position: absolute;
left: -10px;
top: 0;
width: 1px;
height: 100%;
background-color: #F00;
}在上面的例子中，我們使用了
:before
偽類來為
.box
中的內容添加了一條紅色的豎線。下面我們來具體解釋一下每一個屬性的作用。
content: '';
這個屬性用來設置在偽類中生成的內容。在這個例子中，我們沒有設置任何內容，因此，這個豎線是一個空的元素。position: absolute;
我們需要為豎線設置position屬性并將其設置為
absolute，這樣它才會在已定位的父級元素中定位。
left: -10px;
這個屬性設置了這個豎線距離其父級元素最左側的距離。top: 0;
這個屬性設置了這個豎線距離其父級元素最頂部的距離。width: 1px;
這個屬性設置了豎線的寬度。height: 100%;
這個屬性設置了豎線的高度，默認情況下它會和父級元素一樣的高度。background-color: #F00;
這個屬性設置了豎線的顏色。
上面的例子中我們是為左側添加了豎線，如果需要為右側添加豎線，只需要將屬性
left
改為
right
即可。
最后值得一提的是，我們也可以在純CSS中使用這個技巧來實現表格的分割線，甚至在某些情況下，這比使用