Examples of CSS pseudo-elements after and before use (4)

　　Use the :before, :after pseudo-elements to add dividing lines. Instead of adding DOM elements, just add styles to the corresponding elements.

/*Processing of drawing lines before and after the element*/
.hra, .hrb {
	position:relative;
}
.hra:after,.hrb:before{
	content:"";
	position:absolute;
	bottom:0;
	height:1px;
	background-color:gray;
	left:0;
	right:0;
}
.hrb:before{
	top:0;
	bottom:auto;
}

　　Example of use:

<div class="hra">Message list</div>