Как добавить обертку (например, div) к тегу с помощью псевдоэлемента: после использования css и дать ему границу?

Question

Могу ли я дать perfect border-radius изображениям, используя :after, :before и content:""?Я знаю, что могу сделать это в span или div.но мне просто любопытно, могу ли я без добавления дополнительного элемента в html

Мне нужно добавить идеальную границу к изображениям, но я не могу добавить границу к <img>, потому что она не приходитидеально подходит для всех браузеров.

см. мой старый вопрос, чтобы узнать проблему Как получить идеальный радиус границы для изображений во всех браузерах?

<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>

Answer 1

Простой трюк сделать это с небольшим количеством jQuery:

ДЕМО jsBin

(посмотрите в Mozilla, Chrome, ie9, Opera)

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();
});

Нужный CSS:

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

И ваш 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>

Как вы можете видеть, он заменяет изображения на DIV с фоновым изображением, захваченным самим изображением src.