To achieve the effect, but did not understand why you want to set absolute positioning, gurus who knows? / * Pseudo-elements to make navigation list item dividing line * / .nav li: after {content: ""; width: 1px; height: 20px; position: absolute; / * Why you want to set absolute positioning * / top: 15px; right : 0px; background-image: linear-gradient (to top, # f00, # 000);
Absolute positioning from the document stream and having followability, i.e. immediately after the element (the element is not set absolute positioning) before it, does not take up any space. This time he is set to top, right to control the position and thus the perfect pseudo-elements, and without adding padding margin so as not to affect the overall width and height values.
<!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>
