效果實現了，但是沒理解為什么要設置絕對定位，高手們誰知道？ /*使用偽元素制作導航列表項分隔線*/ .nav li:after{ content:""; width:1px; height:20px; position:absolute;/*為什么要設置絕對定位*/ top:15px; right:0px; background-image:linear-gradient(to top,#f00,#000);
絕對定位脫離文檔流，且具有跟隨性，即緊隨在它之前的元素（未設置絕對定位的元素）的后面，且不占據任何空間。這個時候給他設置top， right 從而完美控制偽元素的位置，且不需要加入padding margin 以免影響整體寬高值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> p{ position: relative; } span{ position: absolute; } .test{ display: block; box-sizing: border-box; width:100px; height:100px; position: absolute; background:#3f3f3f; padding:20px 20px; color:white; bottom:300%; left:-50px; visibility: hidden; } .test::after{ top:100%; content: " "; border-width:20px; border-style: solid; position: absolute; background:#3f3f3f; border-color: black white white white; margin-left:50%; left:-20px; } .a{ margin-left:40px; display: block; position: relative; margin-top:200px; } .a:hover .test{ visibility: visible; } </style> </head> <body> <p>asdfasdf <span>sdf</span></p> <a href="" class="a"> <div class="test"> hello world! </div> sd </a> </body> </html>
