css伪类底部,css伪类定位的问题

html>

菜鸟教程(runoob)

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px 0;

position: absolute;

z-index: 1;

bottom: 150%;

left: 50%;

margin-left: -60px;

}

.tooltip .tooltiptext::after {

content: "";

position: absolute;

top: 100%;

left: 50%;

margin-left: -5px;

border-width: 5px;

border-style: solid;

border-color: black transparent transparent transparent;

}

.tooltip:hover .tooltiptext {

visibility: visible;

}

顶部提示框/底部箭头

鼠标移动到我这

提示文本

after里面的top是怎么来定位，让三角和上面的框衔接？搞不懂原因