How To Change A Pseudo Element On Click-CodePudding

I am trying to make a click handler in jQuery that changes the color of an 'eyebrow' element above a Heading element. I know that pseudo elements are not part of the actual DOM, but the way that this is set up in my project has this element set with a pseudo element and I am having trouble figuring out a way to get the color of the eyebrow to change when I click the heading. Any ideas would be greatly appreciated.

codepen: https://codepen.io/jon424/pen/poVYPzr

jQuery(function() {
  changeColor()
});

function changeColor() {
  $('#main').on("click", function() {
    $('.main__heading:before').css("background-color", "red");
  })
}

.padding {
  border  : 1px solid red;
  padding : 40px;
  }
#main:hover {
  cursor : pointer;
  }
.main__heading:before {
  align-items      : baseline;
  background-color : green;
  content          : "";
  display          : flex;
  height           : 5px;
  left             : 0;
  top              : 0;
  width            : 70px;
  }

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

<div >
  <div >
    <h1 type="button" id="main">Heading Text</h1>
  </div>
</div>

CodePudding user response：

You can use css variables...

const
  elm_Main     = document.querySelector('#main')
, elm_MainHead = document.querySelector('.main__heading')
  ;
elm_Main.onclick = () =>
  {
  elm_MainHead.style.setProperty('--bar-bg', 'red');
  }

.padding {
  border  : 1px solid red;
  padding : 40px;
  }
#main {
  cursor    : pointer;
  }
.main__heading {
  --bar-bg  : green;
  }
.main__heading::before {
  align-items      : baseline;
  background-color : var(--bar-bg);
  content          : '';
  display          : flex;
  height           : 5px;
  left             : 0;
  top              : 0;
  width            : 70px;
  }

<div >
  <div >
    <h1 type="button" id="main">Heading Text</h1>
  </div>
</div>

CodePudding user response：

As you mentioned, you can't manipulate :before, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. But you can add a new class with a new :before specified.

Note: While it's impossible to directly modify the :before content, there are ways to read and/or override it using JavaScript. See "Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)" for a comprehensive list of techniques.

Review this revised code block for a working example to solve your issue:

$(function() {
  $('#main').click(function() {
    $('.main__heading').toggleClass('active');
  })
});

.padding {
  border: 1px solid red;
  padding: 40px;
}

#main:hover {
  cursor: pointer;
}

.main__heading:before {
  align-items: baseline;
  background-color: green;
  content: "";
  display: flex;
  height: 5px;
  left: 0;
  top: 0;
  width: 70px;
}

.main__heading.active:before {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div >
  <div >
    <h1 type="button" id="main">Heading Text</h1>
  </div>
</div>