How to change psudo element content based on ID in CSS

Question

<span id="opensidebarid" class="icon"></span>

CSS:

.icon:before {
   content: 'close';
}

I want to change the content of :before using the ID from JavaScript (jQuery). How it is possible? I have tried with prop but not working at all.

Somebody already answered this on this question -> https://stackoverflow.com/questions/317170/how-can-i-change-html-attribute-names-with-jquery — Pipo, Jul 12 '20 at 07:09
Read more about jQuery `.css` here => [css](https://api.jquery.com/css/) — Always Helping, Jul 12 '20 at 07:10
Does this answer your question? [How to change CSS using jQuery?](https://stackoverflow.com/questions/3730035/how-to-change-css-using-jquery) — Always Helping, Jul 12 '20 at 07:11
May be you can't understand my question. This is not just changing CSS using jQuery. — aspile, Jul 12 '20 at 08:40

score 2 · Accepted Answer · answered Jul 12 '20 at 09:01

You can set an attribute in your css to get content data from there and then you can change that attribute using jQuery, since you cannot change the content of a :before element directly:

CSS:

.icon:before {
   content: attr(data);
}

jQuery:

$(document).ready(function(){
  $elem = $("#opensidebarid"); // Get element by ID.
  elemClass = $elem.attr("class"); // Get the class of that element in order to change content.
  $('.' + elemClass).attr('data', "open"); // Change attribute value of content.
});

It's really perfect answer! Thank you. – aspile Jul 12 '20 at 09:14 — aspile, Jul 12 '20 at 09:14

Pipo · Answer 2 · 2020-07-12T08:51:29.557

0

After thinking a bit, I understood your question. ::before is a pseudo-selector, not a DOM element. So you can’t select it via jQuery.

You can toggleClass via jQuery if would like to change the ::before.

You could change it by creating a toggle class. For example:

.icon-toggle {content: "example" !important}

Then you can create either onclick or some action to toggle the change.

$("#opensidebarid").toggleClass("icon-toggle")

If you could write more detailed question I could help you more.

edited Jul 12 '20 at 08:51

answered Jul 12 '20 at 07:16

Pipo

488
2
10

Then how can I change it? – aspile Jul 12 '20 at 08:41
I have edited my answer, please check. And also give more detailed information If you could of what you're trying to do. – Pipo Jul 12 '20 at 08:53

How to change psudo element content based on ID in CSS

2 Answers2