"randomly" angled highlights

index.html

<p class='highlighted'>
    <span>This is a line</span>
    <span>This is a line</span>
    <span>This is a line</span>
</p>

style.css

.highlighted {
    font-weight: bold;
}
.highlighted span {
    display: block;
    line-height: 1.6em;
    position: relative;
}
.highlighted span:after {
    -moz-transform: rotate(2deg);
    background: none repeat scroll 0 0 #1BB5F5;
    content: "";
    display: block;
    height: 1em;
    left: -0.5em;
    padding: 0.3em 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.highlighted span:nth-child(2):after {
    -moz-transform: rotate(-2deg);
}
.highlighted span:nth-child(3):after {
    -moz-transform: rotate(3deg);
}