All geek questions in one place

Generate CSS pseudo-content for dynamic use before and after using Angularjs

I have a div element and you need to apply pseudo elements such as before and after dynamically. I will push data to the css "content" element dynamically from my area. How to do this using angular?

CSS example

.bar:before { content: 'dynamic before text'; height: 20px; } .bar:after { content: 'dynamic after text'; height: 20px; } <div class="bar"></div>
+3
source share
3 answers

To do this, you can use your own data attribute to be 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>
+8
source

You can use attributes in the content field. I think you could get what you need from this.

 span:before { content: attr(data-content); }
+1
source

You can use dynamic html attributes for content, for example: 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>
+1
source

Source: https://habr.com/ru/post/1014076/

More articles:


All Articles