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

React-native sample code to implement the shopping cart sliding deletion effect

Basically all e-commerce projects have the functi...

Detailed explanation of Vue advanced construction properties

Table of contents 1. Directive custom directive 2...

Object-Oriented Programming with XHTML and CSS

<br />If only XHTML and CSS were object-orie...

HTML Basics_General Tags, Common Tags and Tables

Part 1 HTML <html> -- start tag <head>...

Element table header row height problem solution

Table of contents Preface 1. Cause of the problem...

Summary of the differences between MySQL and Oracle (comparison of functional performance, selection, SQL when using them, etc.)

1. Concurrency Concurrency is the most important ...

How to uninstall MySQL 8.0 version under Linux

1. Shut down MySQL [root@localhost /]# service my...

Docker and iptables and implementation of bridge mode network isolation and communication operations

Docker provides multiple networks such as bridge,...

The difference between useEffect and useLayoutEffect in React

Table of contents Prerequisites useEffect commitB...

Detailed explanation of the use of the MySQL parameter sql_safe_updates in the production environment

Preface In case of application bug or DBA misoper...

Copy fields between different tables in MySQL

Sometimes, we need to copy a whole column of data...

Front-end JavaScript Promise

Table of contents 1. What is Promise 2. Basic usa...

Linux uses NetworkManager to randomly generate your MAC address

Nowadays, whether you are on the sofa at home or ...

VMware Workstation installation and installation of WIN10 operating system to connect to the external network step by step guide (super detailed tutorial)

First download VMware Workstation 15.1 version. I...

MariaDB-server installation of MySQL series

Table of contents Tutorial Series 1. Install Mari...