这种方法有任何安全风险吗？

Question

这种方法是否存在任何安全风险？如果有谁能告诉我为什么以及最好的选择是什么？

.bar-graph-one .bar::after {
  -webkit-animation: fade-in-text 2.2s 0.1s forwards;
  -moz-animation: fade-in-text 2.2s 0.1s forwards;
  animation: fade-in-text 2.2s 0.1s forwards;
  color: rgb(255, 251, 251);
  content: attr(data-percentage);
  font-weight: 800;
  position: absolute;
  top: 11px;
  text-align: center;
}

.bar-graph-one .bar-one .bar {
  background-color: rgb(40, 165, 238);
  -webkit-animation: show-bar-one 1.2s 0.1s forwards;
  -moz-animation: show-bar-one 1.2s 0.1s forwards;
  animation: show-bar-one 1.2s 0.1s forwards;
  max-width: 380px !important;
}

<div>
  <section class="bar-graph bar-graph-horizontal bar-graph-one">
    <h6 style="margin-top: 14px !important; margin-left:13px;">{{product?.rate}}%</h6>
    <div class="bar-one">
      <div class="bar" *ngIf="product?.rate !== 0" [attr.data-percentage]="product?.rate +'%'" [style.width.%]="product?.rate" title="{{product?.rate}}%">
      </div>
    </div>