css - 李 :after auto size & :after on a :after element?

Question

我有一些 CSS 问题。

1. 我有一个具有特定宽度的 li 元素。我还想要一个 :afterli 的元素，并将其用作工具提示。是否有可能为工具提示设置一个自动宽度并将其居中置于 li?
之上
2. 如果我在 li:after 元素中有工具提示，我仍然需要一个为此，我需要应用一个 :after 的小三 Angular 箭头:after 元素上的元素。这可能吗？

Answer 1

如果顺序是三 Angular 形，然后是工具提示文本，您可以使用 :before 和 :after 来实现(如评论中所建议)。下面的例子，也可以在 dabblet 上找到，应该会给你一个想法。
http://dabblet.com/gist/4280779

HTML:

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

CSS:

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;  
 }

您可以通过将背景颜色替换为背景图像/渐变等来使工具提示看起来不错。