JSFiddle - React, Tailwind, and code Playground

by Jim Schubert

HTML

<body ng-app="myApp">
    <p class="phone"><span my-background>Hello angular </span>

    </p>
    <p class="tablet"><span my-background>Hello angular </span>

    </p>
    <p class="small-desktop"><span my-background>Hello angular </span>

    </p>
    <p class="large-desktop"><span my-background>Hello angular </span>

    </p>
</body>

CSS

p.phone span:after {

    content:'phone';

}

p.tablet span:after {

    content:'tablet';

}

p.small-desktop span:after {

    content:'small-desktop';

}

p.large-desktop span:after {

    content:'large-desktop';

}

span.bg-small {

    font-size: 0.3em;

}

span.bg-medium {

    font-size: 0.9em;

}

span.bg-small-desktop {

    font-size: 1.2em;

}

span.bg-large-desktop {

    font-size: 2em;

}

JavaScript

angular.module('myApp', [])
    .directive('myBackground', ['$log', function ($log) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            $log.debug("Linking element", element);
            var result = getComputedStyle(element[0], '::after').content;
            $log.debug("Got content %s", result);
            result = result.replace(/"/g, ''); //Because Firefox keeps quotes from content
            $log.debug("Got result %s", result);
            switch (result) {
                case "phone":
                    element.addClass("bg-small");
                    break;
                case "tablet":
                    element.addClass("bg-medium");
                    break;
                case "small-desktop":
                    element.addClass("bg-small-desktop");
                    break;
                case "large-desktop":
                    element.addClass("bg-large-desktop");
                    break;
            }
        }
    };
}])