html - Angular. How to set css properties for "after" and "before" DOM psuedo elements -

html - Angular. How to set css properties for "after" and "before" DOM psuedo elements -

i need alter color of "border-left" reddish default color in scope (blue example).

class="snippet-code-css lang-css prettyprint-override">.hello:before { content:' '; display:inline-block; width: 22px; height: 25px; position:absolute; border-left:3px solid red; } .hello:after { content:' '; display:inline-block; width: 20px; height: 30px; position:absolute; border-left:3px solid red; } class="snippet-code-html lang-html prettyprint-override"><div class="hello"></div>

example single color .hello.blue:before { border-color: blue; } .hello.blue:after { border-color: blue; } <div class="hello {{color}}"></div> example hexadecimal color code

use embedded style, may work if can set in of doc...

<style> .hello:before { border-color: #{{color}}; } .hello:after { border-color: {{color}}; } </style>

and set $scope.color in controller

html css angularjs