纯CSS：鼠标悬停时将工具提示居中于文本上方

拉小提琴看看我到目前为止有什么：

HTML

如您所见，我目前正在通过指定“top”和“left”属性，手动将悬停拖动提示置于文本的中心。如果文本较长或较短，我必须手动更改这些值以使提示看起来居中

---

我正在寻找一种方法，使用纯CSS自动将单词“drag”置于短语“Mouse and drag”上方的中心位置。

如果您将块置于文本上方，并将其设置为

文本对齐：居中，则不必使用JavaScript

.drag-hint:hover > span {
  display: inline;
  position:absolute;
  top: -25px;
  left: 0;
  right: 0;
  text-align: center;
}

.
工作正常。你能解释一下当你将左和右都设置为0时会发生什么吗？nvm，找到了我自己问题的答案：两个0值将框拉伸到与父框一样宽，文本对齐：居中将其置于拉伸框的中心。嗨！非常好，但是如果工具提示比它的容器宽呢？
.drag-hint {
  position:relative;
}
.drag-hint > span{
  display:none;
}
.drag-hint:hover > span {
  display:inline;
  position:absolute;
  top: -25px;
  left: 30px;
}

.drag-hint:hover > span {
  display: inline;
  position:absolute;
  top: -25px;
  left: 0;
  right: 0;
  text-align: center;
}