伪元素翻转导航

Question

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

没有悬停：

      [ ] [ ] [ ] [ ]

悬停，由星号指定：

 [ ] [*]About [ ] [ ]

他们必须保持正确对齐。

Uncceptable：

[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [*]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看起来不错，除了你提到的问题。

  

这种方法导致垂直间距发生无法解释的变化。

要解决此问题，您需要将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/