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

Detailed example of IOS database upgrade data migration

Detailed example of IOS database upgrade data mig...

Several reasons for not compressing HTML

The reason is simple: In HTML documents, multiple ...

Solution to the problem that a line is left blank for no reason on the utf8-encoded page under IE and the utf8 page cannot be displayed

The reason is that all files are encoded in utf8. ...

Vue-pdf implements online preview of PDF files

Preface In most projects, you will encounter onli...

An article to understand the execution process of MySQL query statements

Preface We need to retrieve certain data that mee...

Detailed explanation of how to implement secondary cache with MySQL and Redis

Redis Introduction Redis is completely open sourc...

Solution to forgetting the administrator password of mysql database

1. Enter the command mysqld --skip-grant-tables (...

A brief discussion on the principle of js QR code scanning login

Table of contents The essence of QR code login Un...

New settings for text and fonts in CSS3

Text Shadow text-shadow: horizontal offset vertic...

Detailed explanation of the command mode in Javascript practice

Table of contents definition structure Examples C...

ERROR 1862 (HY000): Your password has expired. To log in you must change it using a .....

error message: ERROR 1862 (HY000): Your password ...

mysql-8.0.15-winx64 uses the zip package to install and the service is shut down immediately after starting

The MySQL version used in this example is mysql-8...

How to configure Nginx's anti-hotlinking

Experimental environment • A minimally installed ...

Example of implementing load balancing with Nginx+SpringBoot

Introduction to Load Balancing Before introducing...

A brief discussion on the problem of forgotten mysql password and login error

If you forget your MySQL login password, the solu...