Css 李：在自动调整大小之后：在a:after元素上的after？

我有一些CSS问题

我有一个具有一定宽度的

li

元素。我还想要一个

：后面的

元素，并将其用作工具提示。有可能吗
为工具提示指定自动宽度，并将其居中放置在
li
上方

如果我在

li中有工具提示：在
元素工作后，我仍然需要一个
为此，我需要在
之后应用一个
：小三角形箭头
元素上的元素：在
元素之后。这可能吗

---

如果顺序是三角形，后跟工具提示文本，则可以通过使用：before和：after（如注释中所建议的）来实现。下面的例子，也可以在dabblet上找到，应该会给你一个想法。

HTML:

您可以通过使用背景图像/渐变等替换背景颜色，使工具提示看起来更漂亮。

第2条的答案是否定的。您应该能够同时使用

：before

和

：after

来实现同样的效果。

<ul>
 <li>first - no tooltip</li>
 <li data-tooltip="Tooltip second">Second</li>
 <li data-tooltip="Tooltip third">third</li>
</li>

li {
  color: #900;
}

li:hover {
  color: red;
  position: relative;
}

li[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 6px 4px 20px;
  color: yellow;
  position: absolute;
  left: 0; 
  top: -150%;
  white-space: nowrap; 
  z-index: 20;
  border-radius: 5px; 
  box-shadow: 0px 0px 2px #333;  
  background-color: black; 
 }

 li[data-tooltip]:hover:before {
  content: "\0394";
  padding-left: 3px;
  position: absolute;
  left: 0px; 
  top: -150%;
  color: yellow;
  z-index: 21;  
 }