Draw '8' in css

Question

.seven_number {
    position: absolute;
    right: 147px;
    top: 25px;
    width: 14px;
}

.seven_number:after {
    content: "";
    height: 5px;
    width: 20px;
    position: absolute;
    background: #c6c6c6;
    top: 0px;
    left: -2px;
}

.seven_number:before {
    content: "";
    height: 27px;
    width: 5px;
    position: absolute;
    background: #c6c6c6;
    top: 0px;
    right: 0px;
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);

<div class="seven_number"></div>

This code is to draw a 7 with css like this https://i.sstatic.net/QVBXi.png

Can anyone help me draw an 8 like that please?

Answer 1

You can use this style as example:

.eight_number {
    position: absolute;
    right: 187px;
    top: 25px;
    width: 14px;
}

.eight_number:after {
    content: "";
    height: 6px;
    width: 6px;
    position: absolute;
    top: 0px;
    border-radius: 50%;
    background-color:#fff;
    border:4px solid #c6c6c6; 
}
.eight_number:before {
    content: "";
    height: 10px;
    width: 10px;
    position: absolute;
    top: 10px;
    left:-2px;
    border-radius: 50%;
    background-color:#fff;
    border:4px solid #c6c6c6; 
}

<div class="eight_number"></div>

See in playground: https://jsfiddle.net/denisstukalov/egv64dk7/16/#&togetherjs=ivslT1OqpI