CSSコンテンツattr（）が設定されていますが、表示されません

Question

私のウェブショップでは、moとCSSとAngularJSのバッジカウンターを作っています。 Angularには、badgeDirectiveを実装するHTML要素に属性を追加または削除するディレクティブがあります。このように：

<md-icon class="material-icons" badge-directive="cart.length" 
aria-label="Cart" >remove_shopping_cart</md-icon> 

CSS：

.badge-directive[badge-counter]:after { 
    background: #5da2e2; 
    border-radius: 7px; 
    color: #fff; 
    content: attr(badge-counter); 
    font-size: 10px; 
    font-weight: 600; 
    height: 14px; 
    line-height: 13px; 
    right: -1px; 
    padding: 0 6px; 
    position: absolute; 
    width: 12px; 
    text-align: center; 
    top: 13px; 
} 

私は、サイトを実行すると、私はバッジが所定の位置にあることがわかりませんが、兆候

angular.module('myApp') 
    .directive('badgeDirective', function($timeout){ 
    return function(scope, elem, attrs) { 
     $timeout(function() { 
      elem.addClass('badge-directive'); 
     }, 0); 
     scope.$watch(attrs.badgeDirective, function(newVal) { 
      if (newVal > 0) { 
       elem.attr('badge-counter', newVal); 
      } else { 
       elem.removeAttr('badge-counter'); 
      } 
     }); 
    } 
}); 

HTMLは次のようになります実際のカウンタ：

私は、デバッガで詳しく見て取り、これを見つけた：

誰かがこれで私を助けることができますか？ なぜ値が表示されないのかわかりません...

Answer 1

ここではどのように動作させることができます。

.material-icons[badge-directive]:after { 
 
    background: #5da2e2; 
 
    border-radius: 7px; 
 
    color: #fff; 
 
    content: attr(badge-counter); 
 
    font-size: 10px; 
 
    font-weight: 600; 
 
    height: 14px; 
 
    line-height: 13px; 
 
    right: -1px; 
 
    padding: 0 6px; 
 
    position: absolute; 
 
    width: 12px; 
 
    text-align: center; 
 
    top: 13px; 
 
} 
 

 

 

 
.material-icons { 
 
    display: block; 
 
    position: relative; 
 
    margin-bottom: 1rem; 
 
}

<md-icon class="material-icons" badge-directive="cart.length" 
 
aria-label="Cart" badge-counter="1">remove_shopping_cart</md-icon> 
 

 
<md-icon class="material-icons" aria-label="Cart" >remove_shopping_cart</md-icon>