我们写页面很多时候都需要用到下边框，比如写列表的时候，就需要用下边框来装饰或者作为分隔符，这个时候就需要用到下边框了，下边框的标准写法就是如下所示：

<div class="article_list">
	<div class="item">测试文字</div>
	<div class="item">测试文字</div>
	<div class="item">测试文字</div>
	<div class="item">测试文字</div>
	<div class="item">测试文字</div>
<div>
<style type="text/css">
* {margin: 0;padding: 0;}
.article_list {
	width: 600px;
}
.item {
	padding: 20px;
	border-bottom: 1px solid red;
}
</style>

用border-bottom指令的效果就如下图所示

我们还可以用另外一种方式实现，还可以实现更多的细节，代码如下：

<div class="article_list">
	<div class="item">测试文字</div>
	<div class="item">测试文字</div>
	<div class="item">测试文字</div>
	<div class="item">测试文字</div>
	<div class="item">测试文字</div>
<div>
<div>
<style type="text/css">
* {margin: 0;padding: 0;}
.article_list {
	width: 600px;
}
.item {
	padding: 20px;
	position: relative;
}

.item::after {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 15px;/*此处还可以控制下划线的长短和位置*/
    height: 1px;/*此处还可以控制下划线的高度*/
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: red;
}
</style>

上面的方法，其实就是使用了样式的伪类来实现的，通过显示块的大小来模拟下划线，可以实现下划线的居左，居右，以及下划线的位置等，这个小妙招还是比较方便的吧，有遇到的同学也可以考虑用此方案。