css - li:after auto size & :after 在 :after 元素上？

Question

我有一些 CSS 问题。

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

Answer 1

如果顺序是三角形，后跟工具提示文本，则可以通过使用 :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;  
 }

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