Animated Directional Arrows In CSS – Arrows.css

Preview:

Description:

The arrows.css CSS library allows you to display animated, interactive, directional arrows before or after elements you specify.

Based on Unicode, no SVG and Image required.

How to use it:

1. Load the minified version of the arrows.css on the HTML page.

<link rel="stylesheet" href="arrows.min.css" />

2. Add the required CSS class arrow to your element and determine the position & direction of the arrow.

<h1 class="arrow before up">Arrows.css Example</h1>
<h1 class="arrow after up">Arrows.css Example</h1>
<h1 class="arrow before down">Arrows.css Example</h1>
<h1 class="arrow before left">Arrows.css Example</h1>
<h1 class="arrow before right">Arrows.css Example</h1>