how to change a::before style by click in jquery?

Question

$("li").click(function () {
 $(this).children('a').css('color','red');
 $(this).children('a::before').css('color','green');
});

li > a::before{
 content: "Hello";
padding:5px 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a>World</a></li>
<li><a>World</a></li>
<li><a>World</a></li>
</ul>

each item has ::before in css file i want to change style them by click

The answer you are looking for might be here: https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin — Pedro Campos, Apr 30 '20 at 20:45

Lucas Hubert · Accepted Answer · 2020-04-30T20:50:25.437

0

Unfortunatly it's not possible to use pseudo-elements in js You should use addClass and in your css add .myclass:before

$("li").click(function () {
 $(this).children('a').css('color','red');
 $(this).children('a').addClass('customClass');
});

li > a::before{
 content: "Hello";
 padding:5px 10px;
}

li > a.customClass::before{
 color: green;
}

edited Apr 30 '20 at 20:50

answered Apr 30 '20 at 20:47

Lucas Hubert

43
4

You seem to be confusing pseudo-elements with preprocessors. They are **very** different things. – Quentin Apr 30 '20 at 20:48
Excuse me, I was wrong. I wanted to say pseudo-elements (:before, :after, :first-line, ...) – Lucas Hubert Apr 30 '20 at 20:51
:first-line is a pseudo-element. https://blog.logrocket.com/a-guide-to-css-pseudo-elements/ – Lucas Hubert Apr 30 '20 at 21:00
Here you are a list of pseudo-class https://developer.mozilla.org/fr/docs/Web/CSS/Pseudo-classes – Lucas Hubert Apr 30 '20 at 21:01
thanks, your answer solved my problem – user3668456 Apr 30 '20 at 21:06
You're welcome :) – Lucas Hubert Apr 30 '20 at 21:08

how to change a::before style by click in jquery?

1 Answers1