如何将CSS Webkit过渡从左到右？

Question

当您将鼠标悬停在它上面时，li元素会向右滑动。我该如何更改它，以便它可以从右向左移动？我还希望项目符号出现在右侧。我已经尝试过更改项目符号的位置和将padding-left更改为padding-right，但它就是不起作用。有人可以帮我吗？

.cmsms_timeline {
 position:relative;
 margin:-11px 0 0 0;
 padding:0 0 37px 29px;
 list-style:none;
}
.cmsms_timeline li {
 position:relative;
 padding-top:24px;
}
.cmsms_timeline li:before,
.cmsms_timeline:before {
 position:absolute;
 top:-2px;
 left:0;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 width:1px;
 height:28px;
 background:rgba(0, 0, 0, .08);
 content:'';
}
.cmsms_timeline:before {
 top:auto;
 bottom:11px;
 left:29px;
}
.cmsms_timeline li a {
 position:relative;
 padding-left:13px;
 -webkit-transition:all .3s ease-in-out;
 -moz-transition:all .3s ease-in-out;
 -ms-transition:all .3s ease-in-out;
 -o-transition:all .3s ease-in-out;
 transition:all .3s ease-in-out;
}
.cmsms_timeline li a:hover {padding-left:19px;}
.cmsms_timeline li a:before {
 position:absolute;
 top:5px;
 left:-2px;
 width:5px;
 height:5px;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 border-radius:50%;
 background:rgba(0, 0, 0, .2);
 content:'';
 -webkit-transition:background .3s ease-in-out;
 -moz-transition:background .3s ease-in-out;
 -ms-transition:background .3s ease-in-out;
 -o-transition:background .3s ease-in-out;
 transition:background .3s ease-in-out;
}

<ul class="cmsms_timeline">
    <li><a>hello world</a></li>
</ul>
 

- user1872874

Answer 1

要使其从右到左转换，只需反转padding-left的值：

.cmsms_timeline li a {
    position:relative;
    padding-left:19px;/*Just reverse these v*/
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
}
.cmsms_timeline li a:hover {padding-left:13px;}/*Just reverse these ^*/

.cmsms_timeline {
 position:relative;
 margin:-11px 0 0 0;
 padding:0 0 37px 29px;
 list-style:none;
}
.cmsms_timeline li {
 position:relative;
 padding-top:24px;
}
.cmsms_timeline li:before,
.cmsms_timeline:before {
 position:absolute;
 top:-2px;
 left:0;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
 width:1px;
 height:28px;
 background:rgba(0, 0, 0, .08);
 content:'';
}
.cmsms_timeline:before {
 top:auto;
 bottom:11px;
 left:29px;
}
.cmsms_timeline li a {
 position:relative;
 padding-left:19px;/*Just reverse these v*/
 -webkit-transition:all .3s ease-in-out;
 -moz-transition:all .3s ease-in-out;
 -ms-transition:all .3s ease-in-out;
 -o-transition:all .3s ease-in-out;
 transition:all .3s ease-in-out;
}
.cmsms_timeline li a:hover {padding-left:13px;}/*Just reverse these ^*/
.cmsms_timeline li a:before {
 position:absolute;
 top:5px;
 left:-2px;
 width:5px;
 height:5px;
 -webkit-border-radius:50%;
 -moz-border-radius:50%;
 border-radius:50%;
 background:rgba(0, 0, 0, .2);
 content:'';
 -webkit-transition:background .3s ease-in-out;
 -moz-transition:background .3s ease-in-out;
 -ms-transition:background .3s ease-in-out;
 -o-transition:background .3s ease-in-out;
 transition:background .3s ease-in-out;
}

<ul class="cmsms_timeline">
    <li><a>hello world</a></li>
</ul>
 

On the right side bullets, there are quite a few proposed ways to do it:
http://css.maxdesign.com.au/listutorial/08.htm
http://www.sitepoint.com/forums/showthread.php?482603-lt-ul-gt-with-bullets-on-the-right
http://voidcanvas.com/how-to-place-bullets-of-tag-after-the-text-of-each/

- Jacob G

---

谢谢！它起作用了。但是我怎么把项目符号移到右边呢？当我尝试这样做时，项目符号也会随着文本一起移动！我的意思是它变得混乱了！ - user1872874

为什么是-1？如果您对答案有疑问，请评论，这样我们就可以知道我做错了什么！ - Jacob G

Answer 2

尝试更改这一行：

.cmsms_timeline li a:hover {padding-left:19px;}

你需要将数字大小调整为小于13像素，像这样：

.cmsms_timeline li a:hover {padding-left:7px;}

- Andrew Hendrie

Answer 3

我想这就是你的答案。

.cmsms_timeline {
  position:relative;
  margin:-11px 0 0 0;
  padding:0 0 37px 29px;
  list-style:none;

}

.cmsms_timeline li {
  position:relative;
  padding-top:24px;
}

.cmsms_timeline li:before,
.cmsms_timeline:before {
  position:absolute;
  top:-2px;
  left:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  width:1px;
  height:28px;
  background:rgba(0, 0, 0, .08);
  content:'';
}

.cmsms_timeline:before {
  top:auto;
  bottom:11px;
  left:29px;
}

.cmsms_timeline li a {
  position:relative;
  padding-left:13px;
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -ms-transition:all .3s ease-in-out;
  -o-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out;
}

.cmsms_timeline li a:hover {
  margin-left:-19px;
  padding-right:19px;
}

.cmsms_timeline li a:after {
  position:absolute;
  top:7px;
  right:-10px;
  width:5px;
  height:5px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  background:rgba(0, 0, 0, .2);
  content:'';
  -webkit-transition:background .3s ease-in-out;
  -moz-transition:background .3s ease-in-out;
  -ms-transition:background .3s ease-in-out;
  -o-transition:background .3s ease-in-out;
  transition:background .3s ease-in-out;
}

<ul class="cmsms_timeline">
  <li><a>hello world</a></li>
</ul>

- M B Parvez

Answer 4

这很简单。只需按照我的步骤即可 :)

ul{
  padding:0;
}
ul>li{
  list-style:none;
  text-align:right;
  transition: 0.5s all ease-in-out;
  -webkit-transition: 0.5s all ease-in-out; /* Prefix for Chrome & Safari */
  -moz-transition: 0.5s all ease-in-out; /* Prefix for Mozilla Firefox */
  -ms-transition: 0.5s all ease-in-out; /* Prefix for IE */
  -o-transition: 0.5s all ease-in-out; /* Prefix for Opera */
}
ul>li:after{
  display:inline-block;
  content:"•";
}
ul>li:hover{
  padding-right:50px;
  transition: 0.5s all ease-in-out;
  -webkit-transition: 0.5s all ease-in-out; /* Prefix for Chrome & Safari */
  -moz-transition: 0.5s all ease-in-out; /* Prefix for Mozilla Firefox */
  -ms-transition: 0.5s all ease-in-out; /* Prefix for IE */
  -o-transition: 0.5s all ease-in-out; /* Prefix for Opera */
}

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>  
</ul>

- Zahid Saeed