How to change the colour of pseudo-elements in CSS through JQuery?

Question

I have made a heart-shaped button using CSS. Here is the JSFiddle link of my code.

#heart {
  height: 50px;
  width: 50px;
  position: relative;
}
#heart .outline:before,
#heart .outline:after {
  position: absolute;
  content: "";
  left: 28px;
  top: 1px;
  width: 15px;
  height: 27px;
  background: #d53423;
  -moz-border-radius: 50px 50px 0 0;
  border-radius: 85px 60px 0 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
#heart .outline:after {
  left: 13px;
  -webkit-transform: rotate(45deg);
  border-radius: 45px 60px 0 0;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
$("#heart").on('submit',
function(e) {
  console.log('click heart support');
  e.preventDefault();
  $('#heart .outline:before').css('background', 'grey');
}
);

<form id="heart">
  <button id="like_btn" class="outline" type="submit"></button>
</form>

When I click the form button, I want this heart-shaped button to change its colour. However, this heart-shaped button is made from CSS pseudo-elements and hence, I can't easily change its colour.

Does anyone have a clue as to how can I manipulate CSS pseudo-elements (e.g. :before and :after) using JQuery?

It can't be done with jQuery - see http://stackoverflow.com/questions/3743513/how-do-i-access-style-properties-of-pseudo-elements-with-jquery — andyb, Apr 29 '13 at 13:46
Add a class instead. Better to keep all styling in the CSS anyway. — powerbuoy, Apr 29 '13 at 14:07

score 20 · Accepted Answer · answered Apr 29 '13 at 14:06

20

I set :before :after background color inherit, then change the background color of their parent. http://jsfiddle.net/npMyy/3/

.outline {
    background: red;
}
#heart .outline:before, #heart .outline:after {
    background: inherit;
}

answered Apr 29 '13 at 14:06

Peiwen

682
7
15

naththedeveloper · Answer 2 · 2013-04-29T14:08:45.847

4

This seems to work for me (Firefox 20)... not tested in anything else..

#heart .outline:active:before,
#heart .outline:active:after {
    background: #000;
}

Here, :active is a pseudo-class, and :before and :after are pseudo-elements. So this is perfectly acceptable according to the standard.

Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be appended after the last simple selector of the selector.

edited Apr 29 '13 at 14:08

answered Apr 29 '13 at 13:50

naththedeveloper

4,503
6
36
44

The css part clearly works, the problem of the asker is changing the colour AFTER, with jQuery... which is not working... :) – Frhay Apr 29 '13 at 13:56
In that case give the element another class using jQuery onlick - then style it differently... I will try and make a jsfiddle... – naththedeveloper Apr 29 '13 at 13:59

score 0 · Answer 3 · answered May 01 '15 at 23:42

Another sol'n would be to change your form's class on submit and target the heart child's :before and :after with the modified selector. Though I do REALLY like N A T H's answer using :active. sxy. Just made minimal changes to your existing code.

DEMO

jquery

$("#heart:not(.submitted)").on('submit',function(e){
    console.log('click heart support');     
    e.preventDefault();
    $('#heart').addClass('submitted');
});

css

// ... removed lines 

#heart.submitted .outline:before,
#heart.submitted .outline:after{
    background: grey;
}

html

<form id="heart" >
    <button id="like_btn" class="outline" type="submit" ></button>
</form>

How to change the colour of pseudo-elements in CSS through JQuery?

3 Answers3

DEMO

jquery

css

html