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;
}

展现到页面是如图