: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中使用这个技巧来实现表格的分割线，甚至在某些情况下，这比使用