:before Pseudo Class shows before page load

[chalupsky]

I have the following code to animate the underline below the main menu items and then highlight the current menu item, however, because it’s in a :before pseudo class, it causes that all the menu items get underlined while the page is loading and only when it’s fully loaded the items get the visibility: hidden property. I wanted to solve it with jQuery but it can’t manipulate pseudo classes since they’re not part of the DOM. I tried all sorts of things and searched for the solution high and low but with no success.
Is there any way how to prevent that unwanted 1s flicker with all the menu items underlined?

.current_page_item:before {
content: “”;
position: absolute;
width: 70%;
height: 2px;
bottom: 5px;
left: 15%;
background-color: #d06700;
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}

[Paulie_D]

Load that CSS after the page renders…?

https://stackoverflow.com/questions/21112220/how-to-load-stylesheets-after-loading-and-displaying-page-without-any-style

and

https://stackoverflow.com/questions/19374843/css-delivery-optimization-how-to-defer-css-loading

Should get you started.

[chalupsky]

Thank you for the links, I’ve tried but can’t get it working:(

[Shikkediel]

Could you share a link to it perhaps?

[chalupsky]

I’d love to but it’s all on localhost
I can’t understand why are all the main menu items underlined for about a second and only when the page is completely loaded the visibility: hidden property kicks in. It’s not an overly serious issue but it’s frustrating that I can’t figure out how to solve it…
Maybe it has something to do with the WordPress’s current_page_item class?

[Author]

Posts