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 ?
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.
You can use the getComputedStyle function, which is supported by most major browsers - IE9,IE10,Chrome,FF. I have not found a way to do this in IE8 though.
var attrContent = getComputedStyle(this,':after').content;
var attrWidth = getComputedStyle(this,':after').width;
If you find this function is undefined try window.getComputedStyle instead.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With