Dot not centered inside custom checkbox

I have created custom checkbox on my page that when checked displays a colored dot. I am having issues centering it.

Here is my css:

.customCheckbox input[type=checkbox]:after {
    content: " ";
    background-color: #fff;
    display: inline-block;
    margin-left:10px;
    padding-bottom:5px;
    color:#00BFF0;
    width:28px;
    height:24px;
    visibility: visible;
    border:4px solid grey;
    padding-left:3px;
    border-radius:10px;
}

.customCheckbox input[type=checkbox]:checked:after {
    content: "\2022";
    color: grey;
    font-size: 60px;
    text-align: center;
    line-height: 30px;
}

Here is what the checkbox looks like when it is checked. I would like to center the dot when it is checked but it does not look centered in this image. I have added text-align:center to center it but it does not work. Any help regarding this will be appreciated. thank you.