Html bullet not appearing as expected

Question

I want to achieve the below screen with html and css in angular 8

So, my-component.html file is as shown below:

<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>

And my-component.scss is as shown below:

 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;
}

So, my current output is as shown below:

The bullets are appearing square instead of circle. I am not sure where I am going wrong.