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

**URL:** <https://community.wpbeaverbuilder.com/t/on-beaver-pages-animated-link-effect-on-hover-doesnt-work/13591>\
**Category:** Beaver Builder\
**Tags:** animations, css\
**Created:** [December 15, 2020, 9:42pm UTC](https://community.wpbeaverbuilder.com/t/on-beaver-pages-animated-link-effect-on-hover-doesnt-work/13591 "2020-12-15T21:42:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![partisanpixel](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/partisanpixel/32/2594_2.png) [@partisanpixel](https://community.wpbeaverbuilder.com/u/partisanpixel)\
**Post date:** [December 15, 2020, 9:42pm UTC](https://community.wpbeaverbuilder.com/t/on-beaver-pages-animated-link-effect-on-hover-doesnt-work/13591/1 "2020-12-15T21:42:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![craiger522](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/craiger522/32/1390_2.png) [@craiger522](https://community.wpbeaverbuilder.com/u/craiger522)\
**Post date:** [December 16, 2020, 2:05am UTC](https://community.wpbeaverbuilder.com/t/on-beaver-pages-animated-link-effect-on-hover-doesnt-work/13591/2 "2020-12-16T02:05:09Z")

</div>

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](https://rural.partisanpixel.com/wp-content/themes/rural/partials/_elements.scss)

---

<div class="post-metadata">

**Author:** ![partisanpixel](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/partisanpixel/32/2594_2.png) [@partisanpixel](https://community.wpbeaverbuilder.com/u/partisanpixel)\
**Post date:** [December 16, 2020, 1:37pm UTC](https://community.wpbeaverbuilder.com/t/on-beaver-pages-animated-link-effect-on-hover-doesnt-work/13591/3 "2020-12-16T13:37:58Z")

</div>

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