Ruler arrows

This class allows you to add a ruler with an arrow pointing up/down or when used in combination with vertical-ruler left/right.

Down

<div style="position:relative;height:200px;width:200px;margin:10px;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <hr class="ruler-arrow-down">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>

Up

<div style="position:relative;height:200px;width:200px;margin:10px;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <hr class="ruler-arrow-up">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>

left

<div style="position:relative;height:200px;width:200px;margin:10px;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <hr class="vertical-ruler ruler-arrow-left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>

right

<div style="position:relative;height:200px;width:200px;margin:10px;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <hr class="vertical-ruler ruler-arrow-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>