Question

我有一些CSS问题。

我有一个具有一定宽度的li元素。我还想要一个:after 此li的元素，并将其用作工具提示。是否有可能给工具提示一个自动宽度并将其置于li？
如果我在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;  
 }

您可以通过用background-image / gradient等替换背景颜色来使工具提示看起来很漂亮。

李：自动尺寸＆amp; ：在a之后：元素之后？

1 个答案: