伪元素翻转导航答案

【问题标题】：Pseudo-element rollover navigation伪元素翻转导航
【发布时间】：2012-02-21 09:11:41
【问题描述】：

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

没有悬停：

      [ ] [ ] [ ] [ ]

悬停，由星号指定：

 [ ] [*]About [ ] [ ]

它们必须保持正确对齐。

不可接受：

[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [*]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;}

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

【问题讨论】：

标签： html css

【解决方案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/

【讨论】：