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");
}

3 comments:

  1. I love it here. Keep sharing your good vibes. I love them Are you also searching for Cheap Nursing Writing Company? we are the best solution for you. We are best known for delivering cheap assignments to students without having to break the bank

    ReplyDelete

Blogroll

Popular Posts