CSS技巧：利用伪元素解决悬停工具提示过早隐藏问题

<p>another line</p>
<p>
  Dies ist ein Beispiel für eine Fußnote in HTML
  <sup class="footnote" data-count="1">
    <cite>
      <span> [Sample span]</span> with some explanation:
      <a lang="en" href="http://test.gv.at/test.pdf">
        http://test.gv.at/test/test/abde4/iabcde/009909asdf/vandsfk23/verylong/gghhy.pdf
      </a>
    </cite>
  </sup>
</p>
<p>another line</p>

sup.footnote::after {
  content: attr(data-count);
}
sup.footnote:hover {
  cursor: help;
  position: relative; /* 确保 cite 可以相对定位 */
}
sup.footnote cite {
  display: none; /* 默认隐藏 */
}
sup.footnote:hover cite {
  display: inline-block; /* 悬停时显示 */
  position: absolute;
  top: 0px;
  left: -50%; /* 示例位置 */
  width: 250px;
  background: #f0f0f0 no-repeat 100% 5%;
  border: #c0c0c0 1px dotted;
  border-radius: 8px;
  margin: 10px;
  padding: 8px;
  overflow: hidden;
}
sup.footnote cite a {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

sup.footnote {
  position: relative; /* 确保伪元素和 cite 可以相对定位 */
}

sup.footnote::before {
  content: ''; /* 伪元素必须有 content 属性，即使为空 */
  height: 100%; /* 覆盖触发元素本身的高度 */
  width: 100%;  /* 覆盖触发元素本身的宽度 */
  position: absolute; /* 绝对定位，相对于 sup.footnote */
  /* 关键：通过 padding 扩展悬停区域 */
  padding-right: 0.5em; /* 向右扩展 */
  padding-bottom: 0.5em; /* 向下扩展 */
  /* 可以根据需要调整 padding-top 和 padding-left */
  top: 0; /* 确保从触发元素的顶部开始 */
  left: 0; /* 确保从触发元素的左侧开始 */
  z-index: 1; /* 确保伪元素在触发元素下方，但高于其他非定位内容 */
  /* 注意：此伪元素应是透明的，不影响视觉 */
}

/* 新增或修改的样式 */
sup.footnote {
  position: relative; /* 确保伪元素和 cite 可以相对定位 */
}

sup.footnote::after {
  content: attr(data-count); /* 显示脚注编号 */
}

/* 核心：通过伪元素扩展悬停区域 */
sup.footnote::before {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  padding-right: 0.5em; /* 向右扩展 */
  padding-bottom: 0.5em; /* 向下扩展 */
  top: 0;
  left: 0;
  z-index: 1; /* 确保它在触发元素下方，但能响应鼠标事件 */
  /* 可以根据需要调整 padding-top, padding-left */
}

sup.footnote:hover {
  cursor: help; /* 悬停时显示帮助光标 */
  /* position: relative; 已经移到基础样式中 */
}

sup.footnote cite {
  display: none; /* 默认隐藏 */
  z-index: 2; /* 确保提示框在伪元素上方显示 */
}

sup.footnote:hover cite {
  display: inline-block; /* 悬停时显示 */
  position: absolute;
  top: 0px;
  left: -20%; /* 根据实际布局调整，可能需要微调 */
  width: 250px;
  background: #f0f0f0 no-repeat 100% 5%;
  border: #c0c0c0 1px dotted;
  border-radius: 8px;
  margin: 10px;
  padding: 8px;
  overflow: hidden;
}

sup.footnote cite a {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}