Manipulating CSS pseudo-elements such as :before and :after using AngularJS

Sunday, 1 February 2015 | Posted by
We can change pseudo elements like :after and :before using classes. If you want to add new CSS for pseudo elements, then add a class with that new CSS to the element. Please refer the below example.

By Classes  

This program will show you, how to manipulate pseudo elements with classes.

CSS

.myElement:after {
   content: 'Mouse Over here change content';
}
.myClass:after {
   content: 'New Content Here';
}

Markup

<div class="myElement" ng-mouseover="changeContent($event)">
</div>

Script

$scope.changeContent = function($event) {
   var myEl = angular.element($event.target);
   myEl.toggleClass('myClass');    
}

By Attributes 

We can assign attributes values to pseudo elements content.

CSS

#myElement:after {
   content: attr(some-attribute-name);
}

Markup

<div id="myElement" ng-click="changeContent($event)" some-attribute-name="Click Here to change content">

Script

$scope.changeContent = function($event) {
   var myEl = angular.element($event.target);
   myEl.attr("some-attribute-name","New Content here");
}
Labels:

2 comments:

Subscribe to: Post Comments (Atom)

Blogroll

Follow this blog by Email

Popular Posts