I am creating a progress bar.
And I want to create a speech bubble that follows the value.
This is sample.
Here is my code
body{display: flex; justify-content: center; align-items: center; height: 100vh;}
progress{ width: 1200px; accent-color: white; background: white; height: 30px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
progress[value] {-webkit-appearance: none; appearance: none;}
progress::-moz-progress{ width: 1200px; accent-color: white; background: white; height: 30px;}
progress::-moz-progress-bar {border-radius: 100px; background: #f9f0f2; background: linear-gradient(to right, rgb(255,255,255), rgba(249, 102, 129, 0.1));}
progress::-webkit-progress-bar {background: #f9f0f2;border-radius: 100px; position: relative;}
progress::-webkit-progress-bar::after{position: absolute; content: ""; }
progress::-webkit-progress-value {border-radius: 100px;background: linear-gradient(to right, rgb(254, 212, 220), rgba(249, 102, 129, 1)); position: relative;}
progress::-webkit-progress-value::after{position: absolute; content: ""; font-size: 1000px;}
progress::-moz-progress-value {border-radius: 100px;background: linear-gradient(to right, rgb(254, 212, 220), rgba(249, 102, 129, 1));}
.barText { width: 279px; margin: 50px auto; border-radius: 60px; background: #f9f0f2; color: #000; padding: 20px; text-align: center; font-weight: 900; font-family: arial; position: relative; top: -200px; left: 350px;}
.barText:before {content: ""; width: 0px; height: 0px; position: absolute; border-left: 20px solid #f9f0f2; border-right: 20px solid transparent; border-top: 40px solid #f9f0f2; border-bottom: 40px solid transparent; left: 10px; top: 30px; transform: rotate(22deg);} <progress value="50" max="100" class="progressBar"></progress>
<div class="barText"></div>In my opinion, position is problem.
How can solve this problem?