How can I make this css webkit transition left to right?

Question

when you hover on it, the li element slides towards right. How can I change it so it can move from right to left?I also want the bullets to appear on the right side. I've tried changing the position of the bullets and also changing the padding-left to padding-right. but it won't just work. can anyone help me with this?

.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

It's really easy. Just follow my steps :)

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>

Answer 2

To make it transition right to left, just reverse the padding-left value:

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

Answer 3

I think this is your answer.

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

Answer 4

Try changing this line:

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

You need to make the number less than 13px like this:

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