I'm trying to create an effect: I have several links with pseudo elements. When these link's :before are hovered over, the text of the link is shown. Here is a mockup:
No hover:
[ ] [ ] [ ] [ ]
Hover, designated by asterisk:
[ ] [*]About [ ] [ ]
They must remain aligned right.
Uncceptable:
[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [*]Contact Us
Acceptable:
[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [*]Contact Us
I have tried several methods using several techniques, each have their own problems:
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;}
This allows the list to be expanded while hovering li, and expands without displaying link text:
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;}
This method does not align un-expanded links right.
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;}
This method leads to inexplicable shifts in vertical spacing.
