CodePen

HTML

            
              <span class="top-arrow"><a href="" >&uarr;</a></span><br>
<span class="top-text"><a href="" >Top</a></span>

<br>

<span class="left-arrow"><a href="" >&rarr;</a></span>
<span class="left-text"><a href="" >Left</a></span>

<br>
        
<span class="right-text"><a href="" >Right</a></span>
<span class="right-arrow"><a href="" >&rarr;</a></span>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              a:link {
    text-decoration: none;
}

.top-arrow a {
    border: 1px solid blue;
}

.top-arrow a:hover {
    border: 1px solid orange;
}

.top-text a {
    border: 1px solid red;
}

.top-text a:hover {
    border: 1px solid green;
    margin-top: -20px;
    padding-top: 20px;
}

.left-arrow a {
    border: 1px solid blue;
}

.left-arrow a:hover {
    border: 1px solid orange;
}

.left-text a {
    border: 1px solid red;
}

.left-text a:hover {
    border: 1px solid green;
    padding-left: 20px;
}

.right-arrow a {
    border: 1px solid blue;
}

.right-arrow a:hover {
    border: 1px solid orange;
}

.right-text a {
    border: 1px solid red;
}

.right-text a:hover {
    border: 1px solid green;
    padding-right: 20px;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................