使用 angularjs 动态样式化伪元素答案

【问题标题】：Dynamically styling pseudo elements with angularjs使用 angularjs 动态样式化伪元素
【发布时间】：2016-11-20 00:28:51
【问题描述】：

我有一个div，如下所示：

<div class="circle-icon"><span class="icon icon-loanaccount"></span></div>

这个div标签有以下样式：

.circle-icon {      
  background: #db552d none repeat scroll 0 0;      
  width: 50px;
  &::after{
    border-bottom: 5px solid #db552d;
    content: "";
    height: 0;
    position: absolute;        
  }&:before{
     border-bottom: 5px solid #db552d;
     content: "";
     height: 0;        
   }      
}

如果我有我想要在scope.borderColor 中使用的颜色，我如何使用角度动态设置border-bottom 的样式？

【问题讨论】：

我不确定我是否正确理解了您的问题，但是您不能使用 JS 选择伪元素，但您可以从父级继承样式，例如我已将边框颜色添加到父级并将颜色继承到子即伪元素jsfiddle.net/victor_007/gqzt3w05

标签： css angularjs angularjs-directive pseudo-element

【解决方案1】：

ng-style 是您的朋友，请在此处查看working link。

$scope.bordercolor = "thick dotted #ff0000";

<div class="circle-icon" ng-style ="{'border-bottom': bordercolor}">
    <span class="icon icon-loanaccount"></span>
</div>

【讨论】：