Rich-text Reply

Add :before to li css

fullerton 07-28-16

Add :before to li css

I need to edit the line height of an unnumbered list line item that uses a :before style. I can easily edit the li itself ($("li").css({"font":"700 16px/35px 'Open Sans'"})Smiley Wink but if I try and use li:before to modify the fontawesome bullet that is at the beginning of the li, it does not work. 


Any tips on how to get Optimizely to understand that I want to edit the :before part?

CouchPsycho 07-29-16

Re: Add :before to li css



as far as i know you can not manipulate :before, because it's not technically part of the DOM and therefore is not accessible by JavaScript.


But you may add a style definition to your dom which overrides the existing definition by using a more specific selector or by adding important to it.


Try something like:


jQuery("head").append("<style>li:before { -your definitions- } </style>");

Kind regards



"the essence of the creative act is to see the familiar as strange." (anonymous)
fullerton 07-29-16

Re: Add :before to li css

Thank you, I'll give it a try.
Lyndsey 07-29-16

Re: Add :before to li css

Michael is correct, here is more information on using :before and :after in case you find that helpful:

Technical Support Engineer
inigam 08-01-16

Re: Add :before to li css

[ Edited ]


Incidently I have just done the same thing but changed :after.

I used element.addClass("<classname>"); and defined the class in CSS. and add !important to your value.

Try if it works for you as well.

You can also use a function to trigger this after completion of page load to ensure this fires late.



Level 6