如何让这个CSS Webkit过渡从左到右？

当你将鼠标悬停在它上面时，li元素向右滑动。我怎样才能改变它，使它可以从右向左移动？我也希望子弹出现在右侧。我试过改变子弹的位置，也改变了填充 - 左填充 - 右键。但它不会工作。谁能帮我这个？如何让这个CSS Webkit过渡从左到右？

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

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

来源

2015-02-07 user1872874

尝试改变这一行：

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

你需要做出比13像素这样的数量少：

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

来源

2015-02-07 20:48:21

为了使过渡权左移，只是反向填充左值：

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

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

在右侧子弹，也有相当多的建议如何做到这一点：
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/

来源

2015-02-07 20:48:35

谢谢！有效。但是，我怎样才能将子弹移到右侧？当我尝试这样做时，子弹也随着文本一起移动！我的意思是它变得混乱了！ – user1872874 2015-02-07 20:53:32

为什么一个-1？如果你的答案有问题，请发表评论，这样我们都可以知道我做错了什么！ – 2015-02-07 20:59:35

@ user1872874查看已更新答案中的链接 – 2015-02-07 21:00:18

我觉得这是你的答案。

.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>

来源

2015-02-07 20:55:15 WebDevRon

这真的很容易。只要按照我的步骤:)

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>

来源

2015-02-07 22:33:38

如何让这个CSS Webkit过渡从左到右？

回答

相关问题