效果图：
<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>纯css实现移入文字出现提示框（position：absolute 和伪类元素）</title> <style> .tips[data-title]{position:relative;top:40px;} .tips[data-title]::before,.tips[data-title]::after{ position:absolute;left:50%;transform:translateX(-50%);visibility:hidden; } .tips[data-title]::before{ content:attr(data-title);top:-47px;padding:2px 10px 3px;line-height: 18px;border-radius:2px;background-color:#333;text-align: left;color:#fff;font-size:12px; } .tips[data-title]::after{ content:"";border:6px solid transparent;border-top-color:#333;top:-7px; } .tips[data-title]:hover::before,.tips[data-title]:hover::after{transition:visibility .1s .1s;visibility:visible;} .icon-delete{display:inline-block;width:20px;height:20px;background:url('https://demo.cssworld.cn/images/6/delete@2x.png') no-repeat center;font-size:16px;color:transparent;} </style></head><body> <a href="javascript:" class="icon-delete tips" data-title="删除">删除</a></body></html>