CSS псевдоэлементы не работают с ng-repeat?

Question

Я перечисляю некоторые изображения с помощью ng-repeat и хочу применить псевдокласс с некоторым содержанием после него.

Вот моя скрипка: https://jsfiddle.net/Noitidart/y7dxa6n8/11/

И вот код:

<style>
    body {background-color:steelblue;}
    img::after { content: 'rawr'; size:100px; color:red; }
</style>
<div ng-app="myApp">
  <div ng-controller="MyController as mc">
    <img ng-repeat="aSrc in mc.arr" ng-src="{{aSrc}}"/>
  </div>
</div>

контроллер:

var myApp = angular.module('myApp', ['ngCookies']);

myApp.controller('MyController', [function($cookie) {
           this.arr = ['https://jsfiddle.net/img/logo.png']
}]);

Однако псевдо-класс не будет работать. Это очень странно.

Answer 1

Дело не в угловых ng-repeat

просто проверь <img /> без угловых и проверить с ::before

лайк

<img src="https://jsfiddle.net/img/logo.png">

img::after { content: 'rawr'; size:100px; color:red; }

его не работает, потому что большинство браузеров не поддерживают ::before, ::after на img элементы

проверить это