Before and: after pseudo-elements

Before and after are the pseudo-elements commonly used in the front-end, in the direct translation of Chinese,

Before represents the previous

After represents the

In CSS, this is probably the case;

The following code:

HTML code

<p class= "box" >this is element</p>

CSS Code

        //before  Chinese translation in front           //after   Chinese translation for after         p.box{             width:500px;             border:solid 1px blue;             padding:20px;        }         p.box:before{             content: ' This is before ';             border:solid 1px pink;             padding:10px;            margin:0 10px  10px 0;         }        p.box:after{             content: "This is after";             //use non-textual content, note that quotation marks cannot be used, otherwise it will be considered as text              //content:url (.. /img/bg.jpg);            width:40px;             height:40px;             border:solid 1px black;             padding:15px;        }

The effect in the browser is as above;

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/58/0B/wKioL1So09nxKC-3AAAutICTKd0498.jpg "title=" 1.png " alt= "Wkiol1so09nxkc-3aaautictkd0498.jpg"/>

Some browsers are not compatible with pseudo elements, such as IE6/7 good for the element is mostly just cosmetic, and does not have much effect on parsing of HTML

Before and: after pseudo-elements