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"); }
https://onlinedevtools.in
ReplyDelete