HTML CSS
(a quick guide)
<p class="arrow up">Up arrow</p> <p class="arrow down">Down arrow</p> <p class="arrow left">Left arrow</p> <p class="arrow right">Right arrow</p>
ARROW "BASE" .arrow::before { display: inline-block; width: 30px; text-align: center; }
ARROW DIRECTION .up::before { content: "\2191" } .down::before { content: "\2193" } .left::before { content: "\2190" } .right::before { content: "\2192" }
ROTATE ON HOVER .arrow:hover::before { transform: rotate(90deg); transition: all 0.3s; }
OFFSET ON HOVER .arrow:hover::before { transform: translateX(5px); transition: all 0.3s; }