Hovering Link Effect
Here’s how you achieve the underlined hovering effect for links.
1
Once you log in, go toAppearance > Customize.
2
Once you click on Customize, you will be taken to your home page and presented with the Customization menu.
Click on Additional CSS.
3
Within Additional CSS, copy and paste the code below. Then hit Publish on the top right-hand side.
@media (min-width: 768px) {
.main-navigation .menu>.menu-item>a:before,
.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
.loud-link a:before {
content: "";
position: absolute;
display: block;
bottom: 1em;
width: 0%;
height: 2px;
background-color: currentColor;
-webkit-transition: 0.3s width ease;
transition: 0.3s width ease;
}
.main-navigation .menu>.menu-item:hover>a:before,
.main-navigation .menu>.menu-item.sfHover>a:before,
.main-navigation .menu>.current-menu-item:not(.wc-menu-item)>a:before,
.loud-link a:hover:before {
width: calc(100% - 40px);
}
.loud-link a {
position: relative;
padding-right: 40px;
}
.loud-link a:hover:before {
width: calc(100% - 64px);
}
.loud-link a:before {
bottom: -0.5em;
}
}
.loud-link a:after {
content: '\21e2';
margin-left: 5px;
}
4
You can then go to any text within a page or post and add a link to the webpage of your choice.
5
To enable Loud Link, go to Advanced and enter loud-link in the Additional CSS class(es) field.
Final Results
Once you save and view the page in Preview, you will see the following results.
