CSS description of the implementation code for displaying text at the end of the horizontal progress bar

CSS description of the implementation code for displaying text at the end of the horizontal progress bar

Problem Description

I want to achieve the following results at work:

insert image description here

Solution

Add a relative positioning to the div tag, and then use absolute positioning to position it on the far right.

<div class="content">
  <div class="bar first" style="width:100%">
    <span>688</span>
  </div>
  <div class="bar second" style="width:50%">
    <span>688</span>
  </div>
  <div class="bar third" style="width:80%">
    <span>688</span>
  </div>
</div>

Your own solution

.bar {
  height: 12px;
  margin-top: 1px;
  position: relative;
  &.first {
    background-image: linear-gradient(90deg, #ecf848 0%, #f9eab9 99%);
  }
  &.second {
    background-image: linear-gradient(90deg, #f5b549 0%, #f9d6b9 100%);
  }
  &.third {
    background-image: linear-gradient(90deg, #f57849 0%, #f9c7b9 100%);
  }
  span{
    position: absolute;
	right: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
  }
}

result:

According to the above writing, the rightmost side of the span tag can only overlap with the rightmost side of the parent tag div, which cannot achieve the goal. The solution is to calculate the value of the span tag and then set right to the calculated length.

insert image description here

Considering that the above implementation needs to rely on js and is too troublesome, think about whether there is a way to achieve the goal only through CSS?

Solution 1: left: 100%;

.bar {
  height: 12px;
  margin-top: 1px;
  position: relative;
  &.first {
    background-image: linear-gradient(90deg, #ecf848 0%, #f9eab9 99%);
  }
  &.second {
    background-image: linear-gradient(90deg, #f5b549 0%, #f9d6b9 100%);
  }
  &.third {
    background-image: linear-gradient(90deg, #f57849 0%, #f9c7b9 100%);
  }
  span{
    position: absolute;
    left: calc(100% + 8px);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
  }
}

The width of left refers to the width of the parent container.

Solution 2: right:0; transform: translate(100%, 0)

.bar {
  height: 12px;
  margin-top: 1px;
  position: relative;
  &.first {
    background-image: linear-gradient(90deg, #ecf848 0%, #f9eab9 99%);
  }
  &.second {
    background-image: linear-gradient(90deg, #f5b549 0%, #f9d6b9 100%);
  }
  &.third {
    background-image: linear-gradient(90deg, #f57849 0%, #f9c7b9 100%);
  }
  span{
    position: absolute;
    right:0;
    transform: translate(100%, 0);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
  }
}

transform: translate refers to the width of its own content

This concludes this article about the CSS code for implementing the text displayed at the end of a horizontal progress bar. For more relevant CSS horizontal progress bar text display content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<:  mysql security management details

>>:  Detailed process of NTP server configuration under Linux

Recommend

Example code of setting label style using CSS selector

CSS Selectors Setting style on the html tag can s...

In-depth understanding of the creation and implementation of servlets in tomcat

1. What is a servlet 1.1. Explain in official wor...

How to increase your web performance by 3 times by turning on a parameter in Nginx

1. Some problems encountered I remember when we w...

Simple steps to implement H5 WeChat public account authorization

Preface Yesterday, there was a project that requi...

The use of setState in React and the use of synchronous and asynchronous

In react, if you modify the state directly using ...

How to install docker under centos and remotely publish docker in springboot

Table of contents 1. Installation of JDK1.8 under...

VMWare15 installs Mac OS system (graphic tutorial)

Installation Environment WIN10 VMware Workstation...

5 MySQL GUI tools recommended to help you with database management

There are many database management tools for MySQ...

Detailed code examples of seven methods for vertical centering with CSS

When we edit a layout, we usually use horizontal ...

HTML table tag tutorial (12): border style attribute FRAME

Use the FRAME property to control the style type ...

IDEA2021 tomcat10 servlet newer version pitfalls

Because the version I used when I was learning wa...

How to create Baidu dead link file

There are two types of dead link formats defined b...

How to configure nginx to return text or json

Sometimes when requesting certain interfaces, you...

Docker image analysis tool dive principle analysis

Today I recommend such an open source tool for ex...

Django+vue registration and login sample code

register The front-end uses axios in vue to pass ...