Как центрировать линию progress bar value, когда нужно, чтобы ее height был больше, чем родитель?

Question

[ac5930]

<progress max="10" value="5"></progress>

progress
  -webkit-appearance: none
  width: 80%
  align-items: center
  height: 20px
  border-radius: 10px
  border-radius: 15px
  &::-webkit-progress-bar
    background: white
  &::-webkit-progress-value
    background: linear-gradient(90deg, rgb(35, 42, 213) 0%, rgb(138, 50, 224) 49%, rgb(176, 53, 228) 100%)
    height: 30px
    align-self: center
progress::-webkit-progress-bar
  border-radius: 15px
progress::-webkit-progress-value
  border-radius: 15px
progress::-moz-progress-bar
  border-radius: 15px

https://codepen.io/r-dnk/pen/XWjdjqe

Answer 1

[Ankhena]

transform: translateY(-5px)

Comments

[ac5930]

Спасибо!!!