一、介紹before/after
CSS中的before和after偽類選擇器早在CSS2時就被引入，改屬性被所有主流瀏覽器所支持了。
before和after顧名思義，分別指的是偽元素在元素前/后添加內容，默認他們是display是inline，但是可以使用CSS設置為block。
應用before/和after也比較簡單，舉個例子：
a:after {
content: " after ";
display: block;
coloe: red;
}
可以在瀏覽器看到，a標簽元素后面多出了一段文字 after。（在CSS3中偽類元素使用是如a::after的，不過目前兩者並無多大區別）。
（偽元素不可通過DOM使用，IE6/7對該屬性不支持）
after和before偽元素有許多用處，還可以簡化代碼，比如可以寫一個計數器、tip小三角形、清除浮動……特別在CSS3中新加的一些屬性更是豐富了它的應用，這里有個小教程，用before/after偽元素來實現一個純CSS3的tooltip。
二、tooltip實現教程
demo:https://hwlv.github.io/fullpage/test/after.html
這里我們主要是用草after/before偽元素content中的attr屬性，先來看看實現后的樣子：
1.實現樣式
2.代碼
鼠標hover button之后，出現一個tooltip小標簽。
代碼先貼上：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> .btn { position: relative; display: block; margin: 200px auto; width: 200px; padding: 10px 20px; font-size: 20px; background: #fff; color: #6bdf4e; border: 1px solid #6bdf4e; cursor: pointer; } .btn::after { content: attr(data-tip); display: none; position: absolute; padding: 5px 10px; left: 50%; bottom: 100%; margin-bottom: 12px; transform: translateX(-50%); font-size: 16px; background: #000; color: #fff; cursor: default; } .btn::before { content: " "; position: absolute; display: none; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 3px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid #000; } .btn:hover::after, .btn:hover::before { display: block; } </style> </head> <body> <button class="btn" data-tip="ToolTip">button</button> </body> </html>
3.實現過程
- 一. 創建一個標簽，然后在標簽內加上一個屬性 data-[] = “ToolTip”,[]表示的是自定義的屬性名稱，引號里面是tooltip需要顯示的內容。
- 二. 給標簽加樣式，position設置為relative，因為之后偽元素需要設置絕對定位來設置位置。
- 三. 給after加樣式，after是需要顯示的tooltip，通過content: attr(data-tip);拿到需要顯示的內容，設置絕對定位，調整位置。
- 四. 給before加樣式，before需要設置成一個小三角tip放在after下面。
- 五. 給after/before的display都設置為none。
- 六. 給需要tooltip的元素偽類選擇hover時設置after/before的display為block，這里需要注意的是after/before默認display為inline，所以我們前面創建調試是display應該先設置為block。
- 七. 打開瀏覽器查看效果