How to create a value indicator for my progress-bar

Question

I'm trying to create an indicator of current value for my progress-bar. Indeed, I have a progress-bar that indicates a value which is updated each new elements.

How it works:

My indicator contains a div with a value, and an other with my bar. The width of my bar depends of the value before. (You can see a picture below). In fact, this value has constraints of color and i would like to create an indicator (kind of triangle) that will match the end of my zprogress-bar width, to show the current value and the current color.

For that, i tried to use css element:after. It is the first time and i do not know exactly how it works. I thought that it would match the end of his owner, but that is not the case. so i have tried to edit it with a 'lef:80%' css attribute and modify this value in jquery. But I ksaw that it is not possible to edit a:after element in js because it is not considered as part of the DOM.

That is why i need your help.

you can see below a part of my code and a picture to illustrate my tried.

<div style="display : none;" class='indicator-content background1'>
    <img class="indicator-logo logo-otd-check" th:src="@{/img/icons/icone-ok.svg}">
    <img class="indicator-logo logo-otd-warning" th:src="@{/img/icons/icone-ko.svg}">
    <div class="indicator-label" th:text="#{quality.projects.indicators.otd}"></div>
    <div class="indicator-value otd-value"></div>
    <div class="indicator-average-label" id="otdValuesNumber" th:text="#{quality.projects.indicators.label.project-average}"></div>
    <div class="d-flex justify-content-center flex-wrap align-items-center">
        <div class="indicator-scale">0</div>                        
        <div class="progress progress-color-otd-oqd">
            <div class="bar-indicator" title="85%" data-toggle="tooltip" data-placement="bottom" style="left:85%"></div>
            <div class="bar-indicator" title="95%" data-toggle="tooltip" data-placement="bottom" style="left:95%"></div>
            <div class="progress-value project-value-bar"></div>
        </div>
        <div class="indicator-scale">100</div>
    </div>
</div>

Here is my css, the last part that i have tried.

.progress-value {
  transition: width 2s, opacity 0.5s;
  box-shadow: 0 10px 40px -10px #fff;
  border-radius: 100px;
  background: #fff;
  height: 8px;
  width: 0;
}

.progress-value:hover{
    opacity : 0.3;
}

.progress-value:after{
    content : '';
    position : absolute;
    width: 0;
    height: 0;
    top : 8px;
    left : 80%;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: 10px solid white;
}

you can see my.progress-value:after element which is in position:absolute, and my left:80% element that i tried to position it.

The picture below illustrate my indicator. As you can see, my progress-bar (in white) show the value marked above. And i would like to the triangle to match the end of the white bar.

enter image description here

Thanks for listening.

Answer 1

Update: So i found a solution to my problem. I just had to put my.progress-value in position:relative And my.progress-value:after in position:absolute with left:100% .

With this, my arrow is following my indicator value.

 .progress-value {
  transition: width 2s, opacity 0.5s;
  box-shadow: 0 10px 40px -10px #fff;
  position: relative;
  border-radius: 100px;
  background: #fff;
  height: 8px;
  width: 0;
}

.progress-value:hover{
    opacity : 0.3;
}

.progress-value:after{
    transition : left 2s;
    font-family: "Font Awesome 5 Free";
    content: "\f0d8";
    position : absolute;
    font-weight: 900;
    color : white;
    top : -6px;
    font-size : 25px;
    left : 100%;
    transform: translateX(-8px);
}