typescript - 如何使用 sanitizer.bypassSecurityTrustStyle 在模板中前后将样式应用于伪元素

Question

我正在尝试将样式应用于伪元素:after

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

我需要更改 a:after 的背景颜色，并且需要在 html 中处理

类似于 [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')

我试过这样的东西，但它不工作

这样做的方法是什么？任何帮助将非常感激...

Answer 1

见下文。

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

a {
    position: relative;
}

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

Answer 3

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

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

试试这个，你就完成了......