как применить стиль к псевдоэлементам до и после в шаблоне, используя sanitizer.bypassSecurityTrustStyle

Question

Я пытаюсь применить стиль к псевдоэлементу :after

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

Мне нужно изменить цвет фона a: after и что мне нужно обработать в html

что-то вроде [style.background] = "red" для a: после в Html, а не в css

1011 * CSS *

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

HTML

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

ц

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

Я пробовал что-то подобное, но оно не работает

Как это сделать? Любая помощь будет высоко ценится ...

Answer 1

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

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

Попробуй и все готово ...

Answer 2

См. Ниже.

.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>

Answer 3

a {
    position: relative;
}

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