A Guide on Modifying a Pseudo Element When Clicked

Question

A Guide on Modifying a Pseudo Element When Clicked

How can I create a click handler in jQuery to change the color of an 'eyebrow' element above a Heading element? The eyebrow element is set up with a pseudo element in my project, and I'm struggling to make it change color when the heading is clicked. Any suggestions or ideas would be greatly appreciated.

You can find the codepen link here: 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 class="padding">
  <div class="main__heading">
    <h1 type="button" id="main">Heading Text</h1>
  </div>
</div>

jquery css pseudo-element

Answer 1

Answer №1

To utilize 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 class="padding">
  <div class="main__heading">
    <h1 type="button" id="main">Heading Title</h1>
  </div>
</div>

Answer 2

To utilize 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 class="padding">
  <div class="main__heading">
    <h1 type="button" id="main">Heading Title</h1>
  </div>
</div>

Answer 3

Answer №2

It was pointed out that manipulating the :before pseudo-element directly is not possible since it is not part of the DOM and cannot be accessed through JavaScript. However, a workaround is to add a new class with a specified :before.

Note: Although directly modifying the :before content is not feasible, there are methods to read and/or override it using JavaScript. Refer to "Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)" for a detailed list of techniques.

Check out the updated code block below for a practical example to address your problem:

$(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 class="padding">
  <div class="main__heading">
    <h1 type="button" id="main">Heading Text</h1>
  </div>
</div>

Answer 4

It was pointed out that manipulating the :before pseudo-element directly is not possible since it is not part of the DOM and cannot be accessed through JavaScript. However, a workaround is to add a new class with a specified :before.

Note: Although directly modifying the :before content is not feasible, there are methods to read and/or override it using JavaScript. Refer to "Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after)" for a detailed list of techniques.

Check out the updated code block below for a practical example to address your problem:

$(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 class="padding">
  <div class="main__heading">
    <h1 type="button" id="main">Heading Text</h1>
  </div>
</div>

A Guide on Modifying a Pseudo Element When Clicked

Answer №1

Answer №2

Similar questions

Ways to move the cursor to the search field after the placeholder text

Is it possible to nest an HTML <span> inside a label tag in a Rails form_for?

What is the best way to set the width of an inner element as a percentage of the Body's width?

Does the jQuery function val() not clear new lines properly?

Use Javascript to create commands and variables specific to the domain or site of a webpage

Modify the JQuery change function depending on whether the 'select' exceeds or falls below a specified value

Navigate through an overflowing element in react/next

Dealing with issues escaping unicode characters in JavaScript

Conceal a division on a webpage according to the URL of the specific

Dynamic anime-js hover animation flickering at high speeds

Include an extra hyperlink in the adaptive menu bar

Adding data to a defaultContent JSON column in JQuery DataTable using JavaScript

Tips for addressing Navbar collision with body content or other pages using CSS

Prevent submission until all input fields are completed

What is the best way to convert modal window functionality from jQuery to native Javascript?

Internal VS External Stylesheets: What you need to know

Eliminate the cushioning on a single item

using jquery to select multiple checkboxes with not() and contains()

Steps for configuring a switch to display a color at random

Can you provide guidance on executing a simple query with Redis using Python?