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

Demo