Add an animated underline hover effect to text links

There's been some recent buzz around our Semplice homepage, and whether it's possible to achieve the same text link hover effect with Semplice. Now you can be as cool as us and add this effect to your own Semplice site (with a little CSS magic, of course!)

Adding the custom class

To get started, find the paragraph module that you wish to add the link hover effect to. In the Content Styles area, look for the Miscellaneous options area. Under 'Custom Class', add a custom classname of "underline-links"

Adding the custom CSS

With our custom class applied to our paragraph module, we will now add the custom CSS necessary to make the effect work. Navigate to Customize > Advanced > Custom CSS > Global and paste in the following:

.underline-links a {position: relative; display: inline-block;}

.underline-links a::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 0;
    right: 100%;
    bottom: 0;
    background: #000;
    height: 1px;
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.underline-links a:hover:before {right: 0 !important;}

That's it!

You can now apply this same effect to any paragraph module that contains links by assigning the classname of "underline-links" to each individual paragraph module.

You can adjust the "background" value in the CSS above to add your own HEX color value to customize the color, as well as the underline thickness by increasing the "height" value.