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

デモ

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

デモ

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