how to apply style to Pseudo Elements before and after in template using sanitizer.bypassSecurityTrustStyle

Question

I am trying to apply style to pseudo element :after

<a class="overflow">{{item?.eco}}</a>

I need to change the background color of a:after and that I need to handle in html

something like [style.background]="red" to a:after in Html not in css

css

.featured-image:after { content: '';
                             background-color: var(--custom); }

html

<a class="featured-image"[style]="sanitizer.bypassSecurityTrustStyle('--custom:' + red)"></a>

ts

this.color = sanitizer.bypassSecurityTrustStyle('--custom')

I tried something like this but its not working

What is the way to do this? Any help would be much appreciated...

Answer 1

a {
    position: relative;
}

a:after {
    content: '';
    width: 100px;
    height: 100px;
    background-color: #ddd;
    position: absolute; 
} 

Answer 2

a.overflow:after {
  content: '';
  display:block;
  width:100px;
  height:100px;
  background-color:red;
}

<a class="overflow">{{item?.eco}}</a>

Try this and you're done...

Answer 3

See below.

.overflow {
  position: relative;
}

.overflow::after {
  content: "";
  background-color: red;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

<a class="overflow">{{item?.eco}}</a>
<br>
<a class="overflow">Lorem ipsum dolor sit amet</a>