how to choose the :after pseudo-element with jQuery

Question

how to choose the :after pseudo-element with jQuery

Below are the codes I have tried. When this popup appears, I want to be able to close the entire popbox using the close button.

CSS code

.bigdiv{
    display:none;
    background-color:#efefef;
    box-shadow: 10px 10px 10px 100000px rgba(0, 0, 0, 0.4);
    border:2px solid #efefef;
    width:400px;
    height:300px;
    position:fixed;
    z-index:500;
    top:25%;
    left:25%;
    margin:0 auto;
    padding:20px;
    }
    .bigdiv:after {
        cursor:pointer;
        content:url('http://static.doers.lk/img/closebox.png');
        position: relative;
        right: -195px;
        top: -310px;
        z-index: 999;
    }

JQUERY

$(".left div").click(function () {

   $(".bigdiv").show("slow");


    $(".bigdiv").click(function () {
   $(".bigdiv").hide();
   }) ;  }) ;

HTML

<div class="left">
<div>intro text here</div><div></div><div></div>
</div>


<div class="bigdiv">some content</div>

I am looking for a way to target the :after elements using jQuery. Can anyone help with this?

javascript jquery html css

Answer 1

Answer №1

Is it possible to target :after elements using jQuery?

Unfortunately, you cannot target generated pseudo-elements like :after with jQuery as they do not exist in the DOM.

This can be demonstrated with the following example:

CSS:

#bar:before {
  content: '[Before]'
}
#bar:after {
  content: '[After]'
}

HTML:

<body><div id="bar">Bar</div></body>

JavaScript:

(function() {

  var messages = [];
  var childElement;
  var newDiv;

  for (childElement = document.body.firstChild;
       childElement;
       childElement = childElement.nextSibling) {
    if (childElement.id) {
      messages.push("Child " + childElement.nodeName + "#" + childElement.id);
    }
    else {
      messages.push("Child " + childElement.nodeName);
    }
  }

  newDiv = document.createElement('div');
  newDiv.innerHTML = messages.join("<br>");
  document.body.appendChild(newDiv);

})();

The resulting page from the above code (assuming the script element is added to the body at the end) will display:

[Before]Bar[After]
Child DIV#bar
Child SCRIPT

Live Example | Source Code

It is clear that the generated pseudo-elements are not recognized within the DOM structure.

Answer 2

Is it possible to target :after elements using jQuery?

Unfortunately, you cannot target generated pseudo-elements like :after with jQuery as they do not exist in the DOM.

This can be demonstrated with the following example:

CSS:

#bar:before {
  content: '[Before]'
}
#bar:after {
  content: '[After]'
}

HTML:

<body><div id="bar">Bar</div></body>

JavaScript:

(function() {

  var messages = [];
  var childElement;
  var newDiv;

  for (childElement = document.body.firstChild;
       childElement;
       childElement = childElement.nextSibling) {
    if (childElement.id) {
      messages.push("Child " + childElement.nodeName + "#" + childElement.id);
    }
    else {
      messages.push("Child " + childElement.nodeName);
    }
  }

  newDiv = document.createElement('div');
  newDiv.innerHTML = messages.join("<br>");
  document.body.appendChild(newDiv);

})();

The resulting page from the above code (assuming the script element is added to the body at the end) will display:

[Before]Bar[After]
Child DIV#bar
Child SCRIPT

Live Example | Source Code

It is clear that the generated pseudo-elements are not recognized within the DOM structure.

Answer 3

Answer №2

To retrieve the styles of a pseudo-element, you can utilize the getComputedStyle method, which is compatible with popular browsers such as IE9, IE10, Chrome, and Firefox. Unfortunately, I have not discovered a solution for achieving this in IE8.

var elementContent = getComputedStyle(this,':after').content;
var elementWidth = getComputedStyle(this,':after').width;

If you encounter an error stating that the function is undefined, consider using window.getComputedStyle instead.

Answer 4

To retrieve the styles of a pseudo-element, you can utilize the getComputedStyle method, which is compatible with popular browsers such as IE9, IE10, Chrome, and Firefox. Unfortunately, I have not discovered a solution for achieving this in IE8.

var elementContent = getComputedStyle(this,':after').content;
var elementWidth = getComputedStyle(this,':after').width;

If you encounter an error stating that the function is undefined, consider using window.getComputedStyle instead.

Answer 5

Answer №3

Regrettably, jQuery (or JavaScript in general) does not allow you to target pseudo-elements.

Although jQuery's appendTo() function works similarly to CSS :after, it can serve as a substitute (albeit not as clean as a pure CSS solution).

For instance, instead of:

.bigdiv:after {
    cursor:pointer;
    content:url('http://static.doers.lk/img/closebox.png');
    position: relative;
    right: -195px;
    top: -310px;
    z-index: 999;
}

Try this approach:

CSS:

.bigdivAfter {
    cursor:pointer;
    position: relative;
    right: -195px;
    top: -310px;
    z-index: 999;
}

JS:

$("<div class=bigdivAfter><img src='http://static.doers.lk/img/closebox.png'></div>").appendTo(".bigdiv");

Then you can subsequently select the closebox image normally.

Answer 6

Regrettably, jQuery (or JavaScript in general) does not allow you to target pseudo-elements.

Although jQuery's appendTo() function works similarly to CSS :after, it can serve as a substitute (albeit not as clean as a pure CSS solution).

For instance, instead of:

.bigdiv:after {
    cursor:pointer;
    content:url('http://static.doers.lk/img/closebox.png');
    position: relative;
    right: -195px;
    top: -310px;
    z-index: 999;
}

Try this approach:

CSS:

.bigdivAfter {
    cursor:pointer;
    position: relative;
    right: -195px;
    top: -310px;
    z-index: 999;
}

JS:

$("<div class=bigdivAfter><img src='http://static.doers.lk/img/closebox.png'></div>").appendTo(".bigdiv");

Then you can subsequently select the closebox image normally.

Answer 7

Answer №4

One way to incorporate a close button using jQuery is by dynamically adding the button and assigning a close event to it. Below is an example of how you can achieve this with jQuery and CSS:

CSS

.bigdivAfter {
    cursor:pointer;
    position: absolute;
    right: //customize as needed;
    top: //customize as needed;
    z-index: 999;
}

JQUERY

$(document).ready(function(){ 
$(".bigdiv").append('<img class="closeButton" src="http://static.doers.lk/img/closebox.png"/>');
$(".bigdiv .closeButton").click(function () {
   $(".bigdiv").hide();
   }) ;
$(".left div").click(function () {
   $(".bigdiv").show("slow");
}) ;

Alternatively, I recommend adding the image directly in the HTML instead of dynamically through jQuery for better performance.

Answer 8

One way to incorporate a close button using jQuery is by dynamically adding the button and assigning a close event to it. Below is an example of how you can achieve this with jQuery and CSS:

CSS

.bigdivAfter {
    cursor:pointer;
    position: absolute;
    right: //customize as needed;
    top: //customize as needed;
    z-index: 999;
}

JQUERY

$(document).ready(function(){ 
$(".bigdiv").append('<img class="closeButton" src="http://static.doers.lk/img/closebox.png"/>');
$(".bigdiv .closeButton").click(function () {
   $(".bigdiv").hide();
   }) ;
$(".left div").click(function () {
   $(".bigdiv").show("slow");
}) ;

Alternatively, I recommend adding the image directly in the HTML instead of dynamically through jQuery for better performance.

how to choose the :after pseudo-element with jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Display text on the screen with a customized design using JavaScript's CSS styles

Breaking down object properties to 'this' using destructuring in javascript

Implementing Knockout.js with JqueryUI Autocomplete: Access the complete object instead of just the value

Difficulty redirecting Ajax call to a timed-out, CAS-protected server

Struggling to access specific data within a JSON object? Wondering how to extract and display data from a JSON object in VUE?

eliminate item from list upon user clicking the button

Implementing Bootstrap 4 in an Angular 9 project without the use of JQuery

What is the correct method to properly encode JSON that may include HTML when displaying it in an HTML file?

Understanding the integration of sass with webpack in an Angular 4 project

Send functions from the back-end Node to the front-end Angular

Adjusting the visibility of a div as you scroll

What are some strategies for disregarding global CSS styles?

Update a table in Laravel view using AJAX with a table join operation

Apply the CSS style specifically to the initial row in the table

React Warning: Every child component within a list must contain a distinct key property

The AngularJS page on my website is currently stuck in the mobile version, and strangely, the Google Chrome console is

The error alert must be displayed directly beneath the specific box

How do I save the value of a callback function in Vue data?

What is the best way to extract a list of particular items from a nested array?

What is the best way to set the input type in AngularJS based on a variable?