<h1>Hello <span>W</span><span>O</span><span>R</span><span>L</span><span>D</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet felis efficitur, dictum felis in, consectetur neque. Aliquam nec tincidunt eros, eget venenatis massa. Suspendisse turpis dui, ultricies tristique quam vitae, vestibulum condimentum urna. Pellentesque libero tortor, luctus et diam quis, facilisis hendrerit magna. Aliquam at justo vitae nisl consectetur sagittis eu eu est. Fusce vehicula purus nibh, in gravida tellus aliquam in. Donec vitae pulvinar arcu. In pellentesque nibh ut lectus efficitur laoreet. Sed vitae laoreet purus, quis iaculis nulla. Phasellus at aliquet elit. Curabitur consectetur tincidunt nisl cursus facilisis.</p>
body {
  background-color: #ddd ;
  font-family: 'Trebuchet MS';
}
h1 {
  color: purple ;
  margin-bottom: 10px;
}
span{
  position: relative;
}
$step: 10px;
@for $i from 1 through 5 {
  span:nth-child(#{$i}){
    top: $i * $step;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.