角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來取代我的僞元素。