CSS pseudo elements before and after

Today, we found that before and after are used in many foreign websites and framework designs, which were rarely used before. I tried them today and found it interesting ~ Description 1.: before AND: after will insert additional elements before and after the content element;: before will "add" an element before the content and: after, an element is added after the content. We can use the content attribute to add content among them. 2.: before AND: after are released on CSS2.1. after the revision in css3, the pseudo elements are:, and the pseudo classes are:. Therefore, the format is: before,: after 3. both single quotation marks and double quotation marks can be recognized by browsers. However, IE8 only supports the single colon format. Therefore, it is a simple example of compatibility or single colon. div1: before {content: open-quote ;}. div1: after {content: close-quote;} <div class = "div1"> Today is a wonderful day. wish you happy ~ </Div> Result: "Today is a wonderful day. Wish you happy ~" Set the pseudo element style eg1 :. div1 {width: 500px; height: 200px; margin: 100px auto; background-color: # F0F0F0; line-height: 200px; text-align: center ;}. div1: before {content: open-quote; position: relative; font-size: 24pt; line-height: 200px; text-align: center; color: # fff; background: # ddd; border-radius: 25px ;}. div1: after {content: close-quote; position: relative; font-size: 24pt; background: # ddd; border-radius: 25px; li Ne-height: 200px; text-align: center; color: # fff ;}< div class = "div1"> Today is a wonderful day. Wish you happy ~ </Div> result: Note: in actual use, extract the same css. div [class * = '']: before, div [class * ='']: after eg2: (used in combination with pseudo classes) Add a style :. div1: hover: after ,. div1: hover: before {background-color: #555 ;}