按条件角度改变伪元素样式答案

【问题标题】：angular change pseudo element style by condition按条件角度改变伪元素样式
【发布时间】：2021-02-15 03:42:28
【问题描述】：

我需要改变：before style by condition 我尝试使用https://stackoverflow.com/a/37902154/13739803 解决方案但不起作用我的代码是：

.sender:before {
              content: "";
              width: 0px;
              height: 0px;
              position: absolute;
              border-left: 15px solid $otaghakPinkLight;
              border-right: 15px solid transparent;
              border-top: 15px solid $otaghakPinkLight;
              border-bottom: 15px solid transparent;
              right: -16px;
              top: 0px;
              visibility: var(--porcentaje-visibility);
}

html代码：

<div class="message-box sender" [style]="{ '--porcentaje-visibility': showAvatar ? 'visible' : 'hidden' }">test</div>

我想显示或隐藏 :before 按条件

【问题讨论】：

标签： html angular sass

【解决方案1】：

这个变量需要放在scss中吗？如果它可以移动到.ts 文件中，我建议在您的模板中添加条件类：

[class.sender--visible]="showAvatar"

然后你需要修改你现有的.scss类，添加visibility: hidden并创建一个新的，它将是：

.sender.sender--visible::before {
    visibility: visible;
}

【讨论】：