HTML CSS

SIMPLE CSS-ONLY ARROW

(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>

THE HTML

01

ARROW "BASE" .arrow::before {   display: inline-block;   width: 30px; text-align: center; }

BASIC CSS ARROW

02

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; }

ARROW ANIMATION

03

OFFSET ON HOVER .arrow:hover::before {   transform: translateX(5px);   transition: all 0.3s; }