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

 

Hi,

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

 

Michael




"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: http://stackoverflow.com/questions/17788990/access-the-css-after-selector-with-jquery

Thanks,
Lyndsey
Technical Support Engineer
Optimizely
Optimizely
inigam 08-01-16
 

Re: Add :before to li css

[ Edited ]

Hey,

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.


Regards
Ikshit

Regards,
IN


Level 6