Application of CSS Pseudo-class before and after

Recently saw some of the pseudo-class articles and examples, feeling not impressed, today in the project has an effect, write down to

There is a horizontal line in the text two times.

1. Page Local Area layout

div->span-> kanji (Small type)

The class is quote-right on 2.span

    <div>        <span class= "quote-right" > Small type </span>    </div>

3 add its corresponding pseudo-class in 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;}

Show to Page is

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Application of CSS Pseudo-class before and after