Как добавить ярлык в тег выполнения?

Я хочу добавить метку в свой ярлык выполнения, как в этом красивом примере:

enter image description here

Предполагая, что значение blue - это значение, а красный - max, как добавить ярлык внутри, например, "35"?

Ответы

Ответ 1

Используйте CSS position:relative для маневра текста на панели.

Быстрое и грязное решение для короткой панели:

position: relative;
left: -100px;

где слева находится текст, который будет рядом с панелью поверх него.

В комментариях Маттиас сделал вывод о том, что left не работает, если индикатор выполнения составляет 100% ширины.

Это не работает, потому что он заставляет текст под панелью. Он будет терпеть неудачу для любой ширины полосы, достаточной для принудительного текста ниже.

Вместо этого вам нужно немного поумнее и сделать что-то вроде:

    position: relative;
    top: -1.5em;
    margin-left: 50%;

Здесь верх: -1.5em заменяет левую настройку в jsFiddle. Левая маржа - попытка центрировать текст. На самом деле это должно быть чуть меньше 50%.

Если у кого-то есть лучшее решение, чтобы сосредоточить текст на панели, который менее взломан, чем ручная 50% -ная маржа, не стесняйтесь комментировать его, и я снова настрою его.

Ответ 2

Я попытался сделать это сам и, наконец, наткнулся на обходное решение.

Использование псевдоэлемента: прежде чем вы сможете сделать это по-другому.

Вы используете контент: attr (значение) следующим образом: https://jsfiddle.net/96z0gwv7/1/ - больше стилей CSS по ссылке

progress
{
  text-align:center;
}

progress:before {
  content: 'Value is ' attr(value);
}

<progress value="6" max="10"></progress>
<progress value="9" max="10"></progress>

Если вам не нужен одинаковый текстовый формат каждый раз, вы можете использовать атрибут data (например, метку данных)

.unique:before {
   content: attr(data-label);
}

<progress class="unique" value="9" max="10" data-label="90% completed"></progress>
<progress class="unique" value="0" max="10" data-label="About to begin"></progress>