List Style

Intoduction :- 
Hii Friends...
Html have 2 types of list . Ordered List and Unordered List. If you are required to put your items in a numbered list  instead of bulleted then HTML ordered list will be used. This list is created by using <ol> tag or <ul> tag. But we weant a stylish look on the list so i give a code that is with good look and feel. 

DEMO:- 

1. Asp.Net
2. HTML
3. CSS
4. Java Script

Example :-
<div class="list-type2">
<ol>
<li><a href="#">Asp.Net</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Java Script</a></li>
</ol>
</div>

<style>

.list-type2{
width:400px;
margin:0 auto;
}

.list-type2 ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font-size: 15px;
font-family: 'Raleway', sans-serif;
padding: 0;
margin-bottom: 4em;
}

.list-type2 ol ol{
margin: 0 0 0 2em;
}

.list-type2 a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #228FAC;
color: #fff;
text-decoration: none;
transition: all .2s ease-in-out;
}

.list-type2 a:hover{
background: #d6d4d4;
text-decoration:none;
transform: scale(1.1);
}

.list-type2 a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background:#228FAC;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
color:#FFF;
}

</style>