Angular ng-style for ::after

Question

I am designing a dynamic hr (horizonatal) rule.

In my Style sheet

hr.my-hr:after{
   content:'Generic'
}

In my template

<div ng-repeat="name in ['Adam', 'Collin', 'David']">
<hr class="my-hr" ng-style="{'content':name}">

But how do i dynamically change the content in the template when using ng-repeat ????

Answer 1

All ng-style does is add inline styles. However you want to add a psuedo element ::after. According to the MDN:

You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

So inferred from that you can't use them inline, which sadly means ng-style can't do what your after.

However if your ::after is defined in a stylesheet you can use ng-class to dynamically add that style.

So

<hr ng-class="{'my-hr': <some condition to evaluate>}" />

Most cases that will suffice. However it looks like to want to dynamically set the content of ::after. So for that i can only imagine two options.

If you just want to simply add the string value use databinding

<hr />
{{name}}

However if you want extra styling on that string create a small directive as a re-usable widget may be the better option.