Angular 2：设置伪元素css

Question

我有一个具有伪元素类的组件，边框背景如下：

styles: [
    `
        .arrow_box.config::after {
            border-bottom-color: attr(data-config-color);
        }
    `
]

这适用的标签如下所示：

<div class="arrow_box config" [attr.data-config-color]="(configData && configData.menu_bar_background ? configData.menu_bar_background : '#ebebeb')"></div>

在组件中声明configData并根据用户交互不时更改。

我看过这些问题：

Bind Angular 2 variable to css pseudo-class content: attr() expression

Dynamically fill css Pseudo-element 'before' content with Angular2

但是从这两个问题来看，我似乎无法推断出我做错了什么。在chrome的检查器中，我可以看到我的三元运算符赋值计算为#ebebeb，这很好，但.arrow_box.config :: after表示分配给border-bottom-color的值无效。我做错了什么？

Answer 1

似乎我在attr() official specification中错过了对content以外的属性的支持是实验性的（阅读：在撰写[2017年3月]时不起作用）。

我尝试的另一种方法是使用CSS变量并绑定到ngStyle中的变量，但是从css variable support isn't cross browser起，它就不可行了。

相反，我最终使用内部div来替换我的伪后元素。