Làm cách nào để thêm nhãn bên trong thẻ thanh tiến trình?

Question

Tôi muốn thêm một nhãn trong thẻ thanh tiến trình của tôi như trong ví dụ xinh đẹp này:

Giả sử các màu xanh là giá trị và màu đỏ là tối đa, làm thế nào tôi có thể thêm một nhãn bên trong có như "35" của tôi?

Answer 1

Sử dụng CSS position:relative để điều chỉnh văn bản trên thanh.

Một giải pháp nhanh chóng và bẩn cho một thanh ngắn gọn là:

position: relative; 
left: -100px; 

nơi trái buộc các văn bản đó sẽ là bên cạnh thanh trên đầu trang của nó.

Trong các nhận xét, Matthias làm cho điểm rằng left không hoạt động nếu thanh tiến trình có chiều rộng 100%.

Nó không hoạt động vì nó buộc văn bản bên dưới thanh. Nó sẽ thất bại cho bất kỳ chiều rộng của thanh đủ để buộc các văn bản dưới đây.

Thay vào đó bạn có để có được thông minh hơn một chút và làm điều gì đó như:

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

Đây đầu: -1.5em thay thế việc điều chỉnh trái trong jsFiddle. Lề bên trái là một cố gắng căn giữa văn bản. Nó thực sự phải là một chút ít hơn 50%.

Nếu ai đó có giải pháp tốt hơn để căn giữa văn bản trên thanh ít bị tấn công hơn lề lề 50% lượn sóng cảm thấy tự do để nhận xét và tôi sẽ điều chỉnh lại điều này.

Answer 2

Tôi đã cố tự làm điều này và cuối cùng đã gặp phải một giải pháp thay thế.

Sử dụng các yếu tố giả: trước khi bạn có thể làm điều đó một cách khác nhau

Bạn sử dụng nội dung: attr (giá trị) như thế này: https://jsfiddle.net/96z0gwv7/1/ - phong cách CSS thêm về liên kết

progress 
{ 
    text-align:center; 
} 

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

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

Nếu bạn không muốn định dạng văn bản giống nhau mỗi khi bạn có thể sử dụng thuộc tính dữ liệu (ví dụ: dữ liệu nhãn)

.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>