I have a menu of text with variable widths eg:
Home
Services
About Us
Contact
How can I position an image to the right of the different width text on hover in css? Is it possible without using a fixed width?
Home
Services •
About Us
Contact
or
Home
Services
About Us
Contact •
Live demo http://tinkerbin.com/RrRtqfVf
Do this one
HTML
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
Css
ul{
list-style:none;
}
li{
position:relative;
float:left;
clear:left;
margin-top:10px;
}
li:hover:after{
content:'';
background:red;
position:absolute;
right:-20px;
top:5px;
width:10px;
height:10px;
}