Question

96

how to select :after element using jquery

rated 0 times [ 100] [ 4] / answers: 1 / hits: 20314 / 12 Years ago, sat, december 22, 2012, 12:00:00

Bellow is my codes.what i have tried.when this popup appear i want to use this close button to close entire popbox.

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 want to select :after elements .how to do that using jquery ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

richardaydenc

Add To Favorites

Follow

Total Points: 148

Total Questions: 125

Total Answers: 98

Location: Seychelles

Member since Mon, Jun 28, 2021

3 Years ago

richardaydenc questions

1 Working with Typescript Interfaces- error: property does not exist

Wed, Sep 1, 21, 00:00, 3 Years ago

1 Uncaught RangeError: Maximum call stack size exceeded - WHY? / How to avoid?

Sat, Jun 19, 21, 00:00, 3 Years ago

1 What is the correct way to import Vuetify components individually?

Tue, Jan 12, 21, 00:00, 3 Years ago

1 How to check if image is loaded in Vue/Nuxt?

Fri, Dec 4, 20, 00:00, 4 Years ago

1 Route not rendering component

Thu, Jul 2, 20, 00:00, 4 Years ago

View All

answered 12 Years ago daijab · Accepted Answer

I want to select :after elements .how to do that using jquery ?

You can't, generated pseudo-elements don't exist in the DOM (yet, sadly).

We can prove this like so:

CSS:

#foo:before {

  content: '[Before]'

}

#foo:after {

  content: '[After]'

}

HTML:

<body><div id=foo>Foo</div></body>

JavaScript:

(function() {



  var msgs = [];

  var child;

  var div;



  for (child = document.body.firstChild;

       child;

       child = child.nextSibling) {

    if (child.id) {

      msgs.push(Child  + child.nodeName + # + child.id);

    }

    else {

      msgs.push(Child  + child.nodeName);

    }

  }



  div = document.createElement('div');

  div.innerHTML = msgs.join(<br>);

  document.body.appendChild(div);



})();

The page resulting from the above (if we assume the script element is added to body at the end) is:

[Before]Foo[After]

Child DIV#foo

Child SCRIPT

Live Copy | Source

As you can see, the generated pseudo-elements are just not present at all as far as the DOM is concerned.