<h2>Horizontal</h2>
<ul class="list-ic horizontal">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
</ul>
<h2>Vertical</h2>
<ul class="list-ic vertical">
<li>
<span>1</span>
<a href="#">Create account.</a>
</li>
<li>
<span>2</span>
<a href="#">Fill in your contact details.</a>
</li>
<li>
<span>3</span>
<a href="#">Voilá! You've got a job.</a>
</li>
</ul>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h2 {
margin: 50px 0 30px 0;
}
body {
font-family: Open Sans, sans-serif;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.list-ic a {
color: #788288;
text-decoration: none;
}
.list-ic li {
position: relative;
}
.list-ic li span {
display: inline-block;
font-weight: 800;
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 1em;
background: #18bc9c;
color: white;
position: relative;
}
.list-ic li::before {
content: '';
position: absolute;
background: #18bc9c;
z-index: -1;
}
.list-ic.horizontal li {
display: inline-block;
}
.list-ic.horizontal li span {
margin: 0 1em;
}
.list-ic.horizontal li::before {
top: 0.9em;
left: -25px;
width: 4em;
height: 0.2em;
}
.list-ic.vertical {
padding: 0;
margin: 0;
}
.list-ic.vertical li {
list-style-type: none;
text-align: left;
}
.list-ic.vertical li span {
margin: 1.4em 0;
}
.list-ic.vertical li::before {
top: -35px;
left: 13px;
width: 0.2em;
height: 4em;
}
.list-ic li:first-child::before {
display: none;
}
.list-ic .active {
background: dodgerblue;
}
.list-ic .active ~ li {
background: lightblue;
}
.list-ic .active ~ li::before {
background: lightblue;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.