BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[css3]水平方向のプログレスバーの最後にテキストを表示するCSSコード

2022-02-02 14:08:12

課題の説明

作品では、次のような効果を得たいと考えています。

ソリューションのアイデア

divタグに相対位置を追加し、右端に絶対位置の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タグの値を計算し、右を計算した長さに設定することです

上記の実装はjsに依存しており、面倒なことを考えると、CSSのみで実現する方法はないでしょうか？

解決策1：左：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);
  }
}

左参照の幅は、親コンテナの幅です

解決策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 参照の幅は、それ自身のコンテンツの幅になります。

水平方向のプログレスバーのCSS記述についてのこの記事は、最終的に実装コードのテキストを示し、これに導入され、より関連するCSS水平プログレスバー表示テキストの内容は、スクリプトホーム以前の記事を検索するか、次の関連記事を閲覧し続け、私はあなたが将来的にスクリプトホームをよりサポートすることを願っています！。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します