How to add wrapper (like div) to a tag using Pseudo-element :after using css and give border to it?

Question

Can i give perfect border-radius to images using :after , :before and content:""? I know I can wrap images in span or div to do it. but I'm just curious if i can without adding extra element to html

I need to add perfect border to images but I cannot add border to <img> because it's doesn't come perfect in all browser.

see my old question to know the problem How to get perfect border radius on images in all browsers?

<div class="small-images">
<img src="theme/a/img/Image_232_black.jpg">
<img src="theme/a/img/product1-232-bottom.jpg">
<img src="theme/a/img/product1-232-up.jpg">
</div>

define "perfect", what problems have you had with other browsers? — amosrivera, Dec 19 '11 at 16:27
Have a look at [this JSFiddle](http://jsfiddle.net/v6FH8/). Is that what you want to do? — Bojangles, Dec 19 '11 at 16:40
@roXon Thanks for clarifying. [This](http://jsfiddle.net/v6FH8/1/) perhaps? — Bojangles, Dec 19 '11 at 16:45
@Jam ... noupe. Not good. Take a look in Chrome / Webkit. Chrome is a bit dummy. — Roko C. Buljan, Dec 19 '11 at 16:46
@JamWaffles - see my this question to understand the problem of giving border to image directly http://stackoverflow.com/questions/8444645/how-to-get-perfect-border-radius-on-images-in-all-browsers — Jitendra Vyas, Dec 19 '11 at 16:47
@roXon Alright, I'll stop making a fool of myself ;-) The day when things 'just work' with browsers will be a strange but welcome one. — Bojangles, Dec 19 '11 at 16:48
@Jitendra - Give it as a background-image to a div and give the div a border-radius style. That's the easiest way i guess. — techfoobar, Dec 19 '11 at 16:49
@techfoobar - I know that way. and I need to give border to each image inside div. I want to do it without adding extra element to html if possible — Jitendra Vyas, Dec 19 '11 at 16:51
@Jam :D glad someone has a sane sense of humor this days. I think this is most important than giving wrong/correct answers/tries. — Roko C. Buljan, Dec 19 '11 at 16:53
@Jam - The day the word 'Crossbrowser' will become actually an uncommon word ... We'll be all drinking in a pub! — Roko C. Buljan, Dec 19 '11 at 16:55
@Jitendra... please... may I write a small jQuery snippet that will help you? Is that fine for you? — Roko C. Buljan, Dec 19 '11 at 16:57
@roXon Thank you. I'd rather fail miserably and enjoy it than fail even harder and not. You can have a beer, I don't like it, although I can't see us ever not having to hack CSS for different browsers. — Bojangles, Dec 19 '11 at 17:00
@Jam :D ... Sad but true friend. I remember it like yesterday, when I've wrote my first website (If I can call it so :D ) and a friend's voice telling me: *'... well, nice. Have you tested it in different browsers than IE ?'* :D Browsers should finally split engines from the W3C standards, and I can't wait the day there will be a central database that will be connected by any existent browser to update the database. — Roko C. Buljan, Dec 19 '11 at 17:09
@roXon You should have seen _my_ first website! Safari turned it into vomit and IE just borked. It's nice to look back and see how far I've come. It would be great if there was a single, good rendering engine made by W3C; so much time could be saved. — Bojangles, Dec 19 '11 at 17:12
@Jitendra Look at my answer. Actually we removed the images and just stole each image `src` and give it to the replacing element background. — Roko C. Buljan, Dec 19 '11 at 17:28
Does this answer your question? [CSS container pseudo element?](https://stackoverflow.com/questions/11586192/css-container-pseudo-element) — Kal, Jul 13 '21 at 01:49

Roko C. Buljan · Answer 1 · 2011-12-19T17:39:53.367

1

Just a trick is to do it with a little bit of jQuery:

DEMO jsBin

(Look in mozilla, chrome, ie9, opera)

The jquery:

$('.small-images img').bind('load each',function(){
  var img = $(this);
  var imgH = img.height();
  var imgW = img.width();
  var src = img.attr('src');
  img.after('<div class="rounded">');
  img.next('.rounded').css({
    backgroundImage: 'url('+src+')',
    width: imgW+'px',
    height: imgH+'px'
  }).end().remove();
});

The needed CSS:

  .rounded{
    border-radius:20px;
    border:4px solid #444;
  }

And your HTML:

<div class="small-images">
   <img src="theme/a/img/Image_232_black.jpg">
   <img src="theme/a/img/product1-232-bottom.jpg">
   <img src="theme/a/img/product1-232-up.jpg">
</div>

As you can see it replaces images with a DIV that has a background-image grabbed by the image src itself.

edited Dec 19 '11 at 17:39

answered Dec 19 '11 at 17:24

Roko C. Buljan

196,159
39
305
313

+1 Thanks for nice try but then I cannot use `alt` attribute for images. – Jitendra Vyas Dec 19 '11 at 17:35
I mean screen reader and search engine will not have access to images in background – Jitendra Vyas Dec 19 '11 at 17:39
@Jitendra They will. We can just set (instead of hiding them) inside the jQuery height and width '0px'. So the images will be 'on page' as your 'alt' attributes. What do you think? (another solution can be to add a position absolute and margin-left:-9000px, to just distance them from the viewport. A common trick. Or even just make them `opacity:0;`) – Roko C. Buljan Dec 19 '11 at 17:44

How to add wrapper (like div) to a tag using Pseudo-element :after using css and give border to it?

1 Answers1