CSS伪类before和after的应用

最近看到一些关于伪类的文章和实例，感觉印象不怎么深刻，今天在项目中出现了效果如图，记下来



在文字两遍各有一条横线.

1.页面局部区域布局

div->span->汉字（小户型）

2.span上有class为quote-right

<div>
<span class="quote-right">小户型</span>
</div>

3那么在css中增加其对应的伪类

.quote-right:before,.quote-right:after{
content: '';
display:inline-block;
width: 20%;
margin: 5px 5%;
border-bottom: 1px solid #cacaca;
}
.quote-right:after{
clear: both;
}

展现到页面是如图