1

I am listing some images with ng-repeat, and want to apply a pseudo class with some content after it.

Here is my fiddle: https://jsfiddle.net/Noitidart/y7dxa6n8/11/

And here is the code:

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

Controller:

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

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

However the pseudo class wont work. This is very odd.

Noitidart
  • 35,443
  • 37
  • 154
  • 323

1 Answers1

3

its not about a matter of angular ng-repeat

just check <img /> without angular and check with the ::before

like

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

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

its not working because of most of the browsers not support ::before, ::after on img elements

check this

Community
  • 1
  • 1
Kalhan.Toress
  • 21,683
  • 8
  • 68
  • 92