CSS如何將圖像放在可變寬度文本右側的翻轉？

Question

我有文字的菜單與可變寬度例如：

Home 
Services 
About Us 
Contact 

我如何定位圖像就在CSS懸停不同寬度文本的吧？ 是否可以不使用固定寬度？

Home 
Services • 
About Us 
Contact 

或

Home 
Services 
About Us 
Contact • 

Answer 1

現場演示http://tinkerbin.com/RrRtqfVf

做的一個

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; 
} 

Demo

Answer 2

試試這個

HTML

<ul> 
    <li>Home</li> 
<li>Services</li> 
<li>About Us</li> 
    <li> Contact</li> 
</ul> 

CSS

ul{width:80px} 
ul li:hover{background:url(http://hotels.online.com.sg/DB/icon/star_icon2.gif) right no-repeat}​ 

DEMO

Answer 3

我的建議，使用background-image ..

讓我們假設這是你的HTML：

<ul> 
    <li>Home</li> 
    <li>Services</li> 
    <li>About Us</li> 
    <li>Contact</li> 
</ul> 

現在，用這個CSS來實現你想要的：

ul{list-style-type:none;} 
ul li{width:120px;} 
ul li:hover{background:url(your/image/path) no-repeat top right;} 

如果您想爲菜單中的每個項目指定不同的圖像/圖標，請使用attributes或其他課程：

<ul> 
    <li data="home">Home</li> 
    <li data="services">Services</li> 
    <li data="about">About Us</li> 
    <li data="contact">Contact</li> 
</ul> 

而且你的CSS應該是這樣的：

ul{list-style-type:none;} 
ul li{width:120px;} 
ul li[data="home"]:hover{background:url(your/image/path1) no-repeat top right;} 
ul li[data="services"]:hover{background:url(your/image/path2) no-repeat top right;} 
ul li[data="about"]:hover{background:url(your/image/path3) no-repeat top right;} 
ul li[data="contact"]:hover{background:url(your/image/path4) no-repeat top right;}