CSS：ブラウザのウィンドウサイズが変更されたときに疑似要素の幅を動的に変更するにはどうすればよいですか？
ジョーさん
進捗状況を顧客に表示するための進捗状況バーを作成しました。あなたは私のコードをチェックアウトすると、あなたは、私はそれを私が設定できることをそのようにビルドをしたことがわかりますwidthのli::after各段階の進捗状況を定義する必要があり、100％ - 0からの要素を。
今、私がウィンドウを最小化する::afterと、最初の要素がそれをli弱体化させるという問題がありますが、next liこれは良くありません。最小化し、各要素間の使用可能なスペースの幅のみを埋める必要があります。
したがって、たとえば、ステップ1が40 %完了し::afterたら、幅を40 %次のように変更する必要があります。
そして、幅がに変更される60 %と、緑色の::after要素は次のステップに少し進みます。40 %最初の::after要素に設定してウィンドウを最小化すると、ウィンドウの幅は新しいウィンドウサイズで変更されず、避けるべき次の要素が損なわれます。これが私の問題です。
たくさん試しましたが、うまくいきません。では、どうすればこの問題を解決できますか？
.progress-container {
position: relative;
}
.progress-container::before {
background-color: #dadada;
width: 80%;
height: 11px;
position: absolute;
left: 10%;
right: 10%;
top: 53px;
content: '';
}
.progress-bar {
list-style: none;
margin: 0;
padding: 0 !important;
display: flex;
display: -ms-flexbox;
justify-content: space-between;
width: 100%;
color: #666666;
font-size: 2em;
}
.progress-bar h3 {
font-size: 18px;
letter-spacing: 2px;
}
.progress-bar li {
position: relative;
display: inline-block;
text-align: center;
font-size: 0.6em;
padding-right: 1em;
}
.progress-bar li::before {
content: attr(data-step);
display: block;
background: #666666;
color: #ffffff;
width: 7em;
height: 7em;
text-align: center;
margin: 0 auto 20px;
line-height: 7em;
border-radius: 100%;
position: relative;
z-index: 1000;
}
.progress-bar li::after {
content: '';
position: absolute;
display: block;
height: 11px;
top: 53px;
left: 50%;
margin-left: 2.9em;
z-index: 2;
}
.progress-bar li.progress-1.is-active::before,
.progress-bar li.progress-1.is-active::after {
background: green;
}
.progress-bar li.progress-1::after {
width: 40%;
}
.progress-bar li.progress-2.is-active::before,
.progress-bar li.progress-2.is-active::after {
background: yellow;
}
.progress-bar li.progress-3.is-active::before,
.progress-bar li.progress-3.is-active::after {
background: orange;
}
.progress-bar li.progress-4.is-active::before {
background: red;
}
.progress__last {
padding-right: 0;
}
.progress__last:after {
display: none !important;
}<div class="progress-container">
<ol class="progress-bar">
<li class="progress-1 is-active" data-step="1">
<h3>1</h3>
</li>
<li class="progress-2 is-active" data-step="2">
<h3>2</h3>
</li>
<li class="progress-3 is-active" data-step="3">
<h3>3</h3>
</li>
<li class="progress-4 progress__last is-active" data-step="4">
<h3>4</h3>
</li>
</ol>
</div> アフィフに同行
以下のようにコードを単純化し、バックグラウンドのトリックを使用します。アイデアは、パーセンテージを定義するためにメイン要素に背景色を使用することです。
また、CSS変数を使用して簡単にしました。
.progress-container {
margin:5px;
}
.progress-bar {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
color: #666666;
background:
/*The gradient that will hide the main one based on the percentage*/
linear-gradient(#dadada,#dadada) 100% 30px/ calc(100% - var(--p,100%)) 10px,
/*the main gradient with 3 colors*/
linear-gradient(to right,
green 0 ,green calc(100%/3),
yellow calc(100%/3) ,yellow calc(2*100%/3),
orange calc(2*100%/3),orange calc(3*100%/3))
0 30px/100% 10px;
background-repeat:no-repeat;
position:relative;
z-index:0;
}
.progress-bar h3 {
font-size: 18px;
letter-spacing: 2px;
}
.progress-bar li {
display: inline-block;
text-align: center;
font-size: 1em;
padding-right: 1em;
}
.progress-bar li:first-child {
margin-left:-5px;
}
.progress-bar li:last-child {
padding-right:0;
margin-right:-5px;
}
.progress-bar li::before {
content: attr(data-step);
display: block;
background: #666666;
color: #ffffff;
width: 4em;
height: 4em;
text-align: center;
line-height: 4em;
border-radius: 50%;
}
.progress-bar li.progress-1.is-active::before {
background:green;
}
.progress-bar li.progress-2.is-active::before {
background: yellow;
}
.progress-bar li.progress-3.is-active::before {
background: orange;
}
.progress-bar li.progress-4.is-active::before {
background: red;
}<div class="progress-container">
<ol class="progress-bar" style="--p:20%">
<li class="progress-1 is-active" data-step="1" >
<h3>1</h3>
</li>
<li class="progress-2" data-step="2">
<h3>2</h3>
</li>
<li class="progress-3" data-step="3">
<h3>3</h3>
</li>
<li class="progress-4 progress__last" data-step="4">
<h3>4</h3>
</li>
</ol>
</div>
<div class="progress-container">
<ol class="progress-bar" style="--p:50%">
<li class="progress-1 is-active" data-step="1">
<h3>1</h3>
</li>
<li class="progress-2 is-active" data-step="2" >
<h3>2</h3>
</li>
<li class="progress-3" data-step="3">
<h3>3</h3>
</li>
<li class="progress-4 progress__last" data-step="4">
<h3>4</h3>
</li>
</ol>
</div>
<div class="progress-container">
<ol class="progress-bar" style="--p:75%">
<li class="progress-1 is-active" data-step="1">
<h3>1</h3>
</li>
<li class="progress-2 is-active" data-step="2" >
<h3>2</h3>
</li>
<li class="progress-3 is-active" data-step="3">
<h3>3</h3>
</li>
<li class="progress-4 progress__last" data-step="4">
<h3>4</h3>
</li>
</ol>
</div>
<div class="progress-container">
<ol class="progress-bar" style="--p:100%">
<li class="progress-1 is-active" data-step="1">
<h3>1</h3>
</li>
<li class="progress-2 is-active" data-step="2" >
<h3>2</h3>
</li>
<li class="progress-3 is-active" data-step="3" >
<h3>3</h3>
</li>
<li class="progress-4 progress__last is-active" data-step="4">
<h3>4</h3>
</li>
</ol>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
コメントを追加