Измените вид элемента со следующим кодом HTML:
<meter min="0" max="100" value="70"></meter>
Чтобы он выглядел в браузере Chrome, как показано на рис. 1. В Firefox вид может отличаться.
Рис. 1
Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>meter</title>
<style>
meter {
--c-gray: #ccc;
--c-green: #43d1a1;
width: 100%;
height: 40px;
background: var(--c-gray);
display: flex;
overflow: hidden;
}
meter::before {
content: attr(value) '°';
height: 40px;
background: var(--c-green);
color: #fff;
font-size: 1.2em;
line-height: 40px;
padding: 0 10px;
position: relative; z-index: 2;
box-shadow: 5px 0 5px rgba(0, 0, 0, 0.3);
}
meter::-moz-meter-bar {
background: var(--c-green);
}
meter::-webkit-meter-bar {
height: 40px;
background: var(--c-gray);
border: 0;
border-radius: 0;
}
meter::-webkit-meter-optimum-value {
background: var(--c-green);
}
</style>
</head>
<body>
<meter min="0" max="100" value="70"></meter>
</body>
</html>