html - 我怎样才能使这个 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>
 

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>
 

在右边的元素符号中，有很多建议的方法可以做到这一点:
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/