html - Html 项目符号未按预期出现

Question

我想在 Angular 8 中使用 html 和 css 实现以下屏幕

所以，my-component.html文件如下所示：

<div class="uptime-container">
  <ul *ngFor="let data of chartData">
    <li [ngClass]="{'my-class li-text': data.status === 'red', 'my-class2 li-text':data.status === 'green' }">{{data.node}}</li> <p class="right-text">{{data.duration}}</p>
   <hr>
  </ul>
</div>

并且my-component.scss如下图所示：

 ul {
    list-style: none;
    width:70%;
   }


 .right-text{
    float: right;
    margin-top: -35px;
    font-size: 15px;
}   

.li-text{
    font-size: 15px;
    margin-top: -35px;
}

hr {
    width:100%;
    margin-right: 57%;
}
ul li.my-class::before{
    color: red;
    content: "•";
    font-size: 50px; /* or whatever */
    font-weight: bold;
    display: inline-block;
    width: 1rem;
    margin-left: 0em;
    padding-right:20px;
    // margin-bottom: -5px;
}

ul li.my-class2::before{
    color: green;
    content: "•";
    font-size: 50px; /* or whatever */
    font-weight: bold;
    display: inline-block;
    width: 1rem;
    margin-left: 0em;
    padding-right:20px;
    // margin-bottom: -5px;
}

.uptime-container{
    background-color: white;
    width: 50%;
    margin-left: 20px;
    margin-top: 20px;
}

所以，我当前的输出如下图所示：

子弹显示为方形而不是圆形。我不确定我哪里出错了。

标签： htmlcssangular8