Can I use AngularJs Directives to apply a style to a pseudo Element


I hope I'm not missing something obvious here but I am trying to learn Angular and I have run in to a problem whilst trying to make a directive.

I am trying to build a Directive that will take the url from a data-attribute ('background-image') and apply that as a background-image to a pseudo element, but I am having trouble figuring out how to target the ::before element or even if Angular can modify a pseudo element.

Here is the directive I am trying to build:

I can get it to apply the background to div.item but when I try target the ::before no joy.

Here is the directive code:

angular.module('testApp', [

  .directive('backgroundImage', function(){
    return function(scope, element, attrs){
        restrict: 'A',
        attrs.$observe('backgroundImage', function(value) {
      // If I remove ::before it will apply image background to .item correctly.
                'background-image': 'url(' + value +')'
Problem courtesy of: Daimz


It is tricky , but possible. Try something like:

 var style = "<style>.item:before{background-image:url("+value+")}</style>"

Working here:

Solution courtesy of: Cherniv


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.