CSS3——偽元素
阿新 • • 發佈：2018-12-22
偽元素天生存在於任意元素裡面，任意元素裡面有兩個特殊的偽元素，一個叫before一個叫after。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } </style> <title></title> </head> <body> <span>123</span> </body> </html>
span::before{
content: "456";
}
span::after{
}
偽元素就是這麼來寫，中間有兩個冒號，你不小心寫了一個冒號也會給你當成偽元素來處理，
針對偽元素必須有的是content，比如上面content: "456";，在頁面中就會體現出來，而且456是偽元素的內容而且456還屬於span。
為什麼叫偽元素，是因為他的元素結構是存在的，但是他又沒有寫在HTML裡面，他可以被css操作，但是他沒有元素結構。
after也同理。
偽元素天生就存在，我們只不過是通過css把他選中（不是創造），並且進行修改。
Content只能用在偽元素裡面，用在其他元素裡面不好使。
因為偽元素沒有一個確切的結構，你很難通過html形式往裡面去加內容，所以你之能通過css的content屬性往裡面加內容。即使你偽元素裡面啥也不寫，你也得把content加上（content: "";）。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } span::before{ content: ""; width: 100px; height: 100px; background-color: red; } </style> <title></title> </head> <body> <span>123</span> </body> </html>
我現在給偽元素加個寬加個高，你看他會有嗎？
- 沒有！！
為什麼？
因為偽元素是行級元素，他天生是illine的，咱們給他改成inline-block就可以了。
他可以當成正常元素來使用，一個在邏輯之前，一個在邏輯之後，可以進行定位……