On Beaver pages, animated link effect on hover doesn't work

Beaver Builder
,
1

I’m animating links using the ::after pseudo element. When you hover over a link, a 2px bar animates to the full length of the link.

a {
	position: relative;
	display: inline-block;
	color: $copper;
	font-weight: $regular;
	text-decoration: none;
	@include link-trans;
	&::after {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;	
		width: 0;
		height: 2px;
		background: $copper;
		transition: width .3s;
	}
}

a:hover,
a:focus  {
	color: $copper;
	text-decoration: none;
	&::after {
		width: 100%;
	}
}

You can see it working in the main flyout navigation:

But on any page where I use Beaver Builder, the effect dies. The ::after pseudo element is not created by the browser. Try the main navigation on the homepage:
removed for client privacy

I’ve spent hours troubleshooting this. I’m pretty sure it is due to some way that Beaver Builder controls the DOM.

Any ideas as to why? or how to get around this?
Thanks for your help.

2

There is a class on the body that is overriding your pseudo element. Remove that and you’re back in business!

/* ==========================================
Elements
============================================= */

.resp-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}

// kill beaver links and more

body.fl-builder {
a::after {
display: none !important;
}
button,
input[type=“button”] {
min-width: 0;
}
}

Source: https://rural.partisanpixel.com/wp-content/themes/rural/partials/_elements.scss

1 Like
3

Damn. I should have noticed that. I’m so thankful you did, @craiger522.
Much appreciated.
Michael