CSS, How set ::after to HTML tag directly

Question

I want to set width each div items, But I don't know. help me.

.progress{
    /* width: 100%; */
    position: relative;
    height: 100%;
}
.progress::after{
    content: '\A';
    position: absolute;
    background: rgba(200, 200, 200, 0.5);
    top: 0; bottom: 0;
    left: 0; 
    width: 50%; /* Specify the width.. */
}

<div class="progress"></div>

I want to use like this

<div class = "progress" style = ":after{width: {{x}}%;}">