I have a div element and need to apply pseudo elements such as before and after dynamically. I will be pushing data to css "content" element dynamically from my scope. How can I do that using angular?
Sample CSS
.bar:before {
content: 'dynamic before text';
height: 20px;
}
.bar:after {
content: 'dynamic after text';
height: 20px;
}
<div class="bar"></div>
You can use a custom data attribute for this to keep it flexible:
.bar::before,
.bar::after
{
background-color: silver;
}
.bar::before
{
content: attr(data-before-content)
}
.bar::after
{
content: attr(data-after-content)
}<div class="bar" data-before-content="Hello" data-after-content="There">I have content</div>
<div class="bar" data-before-content="Hello">I have content</div>
<div class="bar" data-after-content="Different">I have content</div>
<div class="bar">I have content only</div>
You can use dynamic html-attributes for the content, like this: JSBin: http://jsbin.com/sepino/edit?html,css,js,output
<!DOCTYPE html>
<html ng-app="test">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script language="JavaScript">
angular.module('test',[]).controller('testController',function(){
this.textbefore = 'left ';
this.textafter = ' right';
});
</script>
<style>
.bar:before {
content: attr(data-textbefore);
height: 20px;
}
.bar:after {
content: attr(data-textafter);
height: 20px;
}
</style>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="testController as myCtrl">
<div class="bar" data-textbefore="{{myCtrl.textbefore}}" data-textafter="{{myCtrl.textafter}}">inside</div>
</body>
</html>
You can use attributes in the content field. I guess you could pull in what you need from that.
span:before {
content: attr(data-content);
}