CSS Animation Link Underline

Paulund is full of premium tutorials and support to help with your development

Sign up to get full access to all tutorials.

Get full access for $5/mo

Login to your account


In this tutorial we're going to investigate how you can use CSS animation using transition to create link effects on the hover event of the visitor. Were going to look at 4 different effects: Middle outwards Left to right Right to left Grow from Bottom .link-background{background: #2c3e50;padding: 2rem 3rem;margin-bottom: 3rem; text-align: center;} a.middle,a.left,a.right,a.bottom{ color: #FFF; position: relative; margin: 3rem; text-decoration: none;} a.middle:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0 . . . This content is restricted to subscribers