CSS怎么实现横向进度条最后显示文字

这篇文章将为大家详细讲解有关CSS怎么实现横向进度条最后显示文字，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

问题描述

在工作中想要实现如下效果：

解决思路

在 div 标签中添加一个 relative 定位，然后使用绝对定位 absolute 在最右侧

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

自己的解决办法

.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);  }}

结果：

按照上面的写法，只能是 span 标签的最右侧和父标签div 的最右侧重叠，无法实现目标。解决办法，计算 span标签的值，然后right 设置为计算的长度

考虑到上述实现需要依赖于js,而且过于麻烦，想想有没有办法只通过CSS实现目标呢？

解决办法一： 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);  }}

left 参照的宽度是 父容器 的宽度

解决办法二： 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 参照的宽度是自身内容的宽度

关于“CSS怎么实现横向进度条最后显示文字”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。