UL LI CSS impacts the pre-loader animation

Hi
I have some CSS to customise list bullets as below. I’m finding any customisations impact the pre-loader animation. I know I can disable the preloader, but I like it and I self host so not the greatest bandwidth requiring a preloader. I don’t want to add a class to my li in the HTML as I want average users to be able to add content. How can I isolate the animation from my CSS?

Stylisation done in Custom CSS/JS plugin

Website: http://www.klipspringerhouse.com

ul {
list-style: none;
}

li {
position: relative;
}

ul li:before {
/*
The desired width gets defined in two places: The element width, and background size.
The height only gets defined once, in background size.
/
position: absolute;
display: block;
content: ‘\2022’; /
bullet point, for screen readers /
text-indent: -999999px; /
move the bullet point out of sight */
height: 16px;
width: 16px;
background-image: url(‘http://www.klipspringerhouse.com/wp-content/themes/Klipspringer-House/klipspringer_list.png’);
background-size: contain;
background-repeat: no-repeat;
margin-left: -35px;
}

Fixed it with specifying class in CSS
.content-area li { …

Hello @benpaddlejones,

It’s great that you fixed it!

Please feel free to ask any other questions that you might have in future.

Have a nice day :slight_smile:

Kind Regards, Roman.