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

展现到页面是如图