html - 伪元素翻转导航

Question

我正在尝试创建一个效果:我有几个带有伪元素的链接。当这些链接的 :before 悬停时，将显示链接的文本。这是一个模型:

没有悬停:

      [ ] [ ] [ ] [ ]

悬停，由星号指定:

 [ ] [*]About [ ] [ ]

它们必须保持右对齐。

Not Acceptable :

[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [*]Contact Us

可接受:

          [ ] [ ] [ ] [ ]
[ ] [ ] [ ] [*]Contact Us

我尝试了几种使用多种技术的方法，每种方法都有自己的问题:

Option 1 :

*{margin:0; padding:0;}
ul{float:right; background:red;}
li{list-style-type:none; display:inline-block; width:20px; height:20px;}
a {display:block; position:relative; margin:10px; text-indent:-9999px;}
a:before{content:''; display:block; width:20px; height:20px; background:black; position:absolute; left:-30px; margin:0 5px;}
a:hover{text-indent:0;}
li:hover,ul:hover{width:auto;}

这允许在悬停 li 时展开列表，并且展开时不显示链接文本:

Option 2 :

*{margin:0; padding:0;}
ul{background:salmon; float:right;}
li{background:lightblue; display:inline-block; list-style-type:none; }
a{background:gray; display:block; position:relative; padding-right:25px; text-indent:-9999px;}
a:before{content:'a'; position:absolute; top:0; left:-20px; height:20px; width:20px; background:black; text-align:center; text-indent:0;}
a:hover{text-indent:0;}

此方法不会正确对齐未展开的链接。

Option 3 :

*{margin:0; padding:0;}
ul{background:salmon; text-align:right;}
li{background:lightblue;  display:inline; height:20px;}
a{background:gray; display:inline-block; width:20px; height:20px; overflow:hidden; text-align:center;}
a:before{content:'a'; display:inline-block; width:20px; height:20px;}
a:hover{width:auto;}

这种方法会导致垂直间距发生莫名其妙的变化。

Answer 1

选项 3 在我看来不错，除了你提到的问题。

This method leads to inexplicable shifts in vertical spacing.

要解决此问题，您需要将 vertical-align: top 添加到您拥有 display: inline-block 的位置。

看看:http://dabblet.com/gist/1872722

这是一个较旧的答案，其中包含对奇怪排列的解释:Why aren't these elements with display:inline-block properly aligned? .

还值得一读:http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/