CSS伪类:hover与::after结合如何实现悬停提示_使用:hover ::after显示提示内容

<span style="color:#00007F;font-weight:bold"><span</span> <span style="color:red">class=</span><span style="color:#0000ff">"tooltip"</span> <span style="color:red">data-tip=</span><span style="color:#0000ff">"这是提示内容"</span><span style="color:#00007F;font-weight:bold">></span>悬停我<span style="color:#00007F;font-weight:bold"></span></span>

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
<p>.tooltip::after {
content: attr(data-tip);          /<em> 从 data-tip 属性读取提示文字 </em>/
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 6px 10px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;             /<em> 防止遮挡交互 </em>/
}</p><p>.tooltip:hover::after {
opacity: 1;
visibility: visible;
}</p>

.tooltip::after {
  /* ...其他样式 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}