How to use css :after in Jquery

Question

I have this piece of CSS:

.image-wrap:after {
    content: ' ';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    box-shadow: inset 0px 0px 0px 5px red;
}

I would like to 'write' this in Jquery. I'm having trouble with :after Is there any way of using :after in Jquery? Please take a look at my full code: http://jsfiddle.net/WpGsx/23/

@j08691 I can't use css in stylesheet or inline(with HTML) with the script Im working on. So I would like to write the css in Jquery. In this case I would like to set :after in Jquery code. So basically do the same thing as you see in the Fiddle but without the css rules on the right. — Youss, Mar 27 '13 at 20:21
The supposed duplicate is about the 'content' its not about using :after — Youss, Mar 27 '13 at 20:29
this is not a duplicate, his main goal is to add a box shadow with inset to/around the image, question should be edited though — Huangism, Mar 27 '13 at 20:37
@BoltClock He wants to change 'foo' in to 'bar' and the anwser is `$(this).attr('data-content','bar')` How does that help me?? — Youss, Mar 27 '13 at 20:38
you should edit the question to ask how to add an inset box shadow to an image using jquery — Huangism, Mar 27 '13 at 20:48
@Youss: Scroll down; there's more than one answer to that question. Your question as it is is the same as the other question. That's why I marked them as dupes. — BoltClock, Mar 28 '13 at 07:04

Huangism · Accepted Answer · 2013-03-27T20:44:36.830

0

Ok here is the inset

http://jsfiddle.net/WpGsx/30/

you might wanna check in different browsers

var $wrap = $('.image-wrap');

$wrap.css({
    'box-shadow': 'inset 0px 0px 0px 5px red',
    'position':'absolute',
    'left':'0',
    'top':'0',
    'padding':'5px 5px 0 5px'
});

edited Mar 27 '13 at 20:44

answered Mar 27 '13 at 20:18

Huangism

16,278
7
48
74

Sorry I can't use addClass. Im screen scraping using Iframes. Somehow addClass doesn't work for me. – Youss Mar 27 '13 at 20:22
Im working on it to see if that would work.. – Youss Mar 27 '13 at 20:23
Doesn't work http://jsfiddle.net/WpGsx/27/ – Youss Mar 27 '13 at 20:36
I know....it has to be inset.... – Youss Mar 27 '13 at 20:40
Thank you:) Its not perfect(padding...) but its a start. Gave you +1 but someone downvoted you.. – Youss Mar 27 '13 at 20:50
I am sure you can figure out the rest – Huangism Mar 27 '13 at 20:51
I understand the padding now...Its basically the same as giving the img a border – Youss Mar 27 '13 at 20:56
So how is that an answer? :) – Youss Mar 27 '13 at 21:01
well the way you have it set up it is displaying like a border, it is unclear what the final intention is. I assume the style will not be as simple as this so my answer serves as a gateway into more possibilities – Huangism Mar 27 '13 at 21:03
Ok thanks for sticking around but I really just wanted the inset (which is impossible to set for images) – Youss Mar 27 '13 at 21:04

How to use css :after in Jquery

1 Answers1