Question

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

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

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

类似[style.background] =“ red”到HTML中的a：after而不是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

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>

尝试一下，您就完成了...

Answer 3

请参阅下文。

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

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

3 个答案: