css - li:after 自動サイズ & :after on a :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;  
 }

background-color を background-image / gradient などに置き換えることで、ツールチップの見栄えを良くすることができます。