CSS Caret Pseudo Element A helpful visual guide

Mar 12, 2016

A popular trend lately is to feature full-width sections on a web page. These sections are typically different colors and provide a clean, organized way to show content.

Carets naturally draw the eye to the next section.

A great addition to these sections is to include a caret (down arrow) between sections. Carets naturally draw the eye toward the next section and are easy to add.

See the Pen Caret Pseudo Element by Adam Bushá (@adambusha) on CodePen.

Customization Tip:

To change the size of the caret there are a few properties you’ll need to modify. The height and width will change the actual size of the caret. You’ll also need to change the bottom and margin-left properties. These will need to be half the value of the height and width properties.

Adam Bushá