スケーラブルなサークルをラインで接続

Question

サークルをCSSのラインで接続したいと思っています。私はこれを達成したStackoverflowの答えに感謝します。しかし、私はホバーでサークルをそのサイズの2倍に拡大したいと思っています。しかし、私がそうしているとき、サークルの前の線もまた縮尺されています。下記の

は私のスタイリングは、あなたが要素（ここではli）に::beforeを使用すると、動的に追加されたコンテンツは、その要素の最初の子なります

li { 
 
    width: 2em; 
 
    height: 2em; 
 
    text-align: center; 
 
    line-height: 2em; 
 
    border-radius: 1em; 
 
    background: dodgerblue; 
 
    margin: 0 1em; 
 
    display: inline-block; 
 
    color: white; 
 
    position: relative; 
 
} 
 

 
li:hover { 
 
    transform: scale(3); 
 
} 
 

 
li::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: .9em; 
 
    left: -4em; 
 
    width: 4em; 
 
    height: .2em; 
 
    background: red; 
 
    z-index: -1; 
 
} 
 

 
li:first-child::before { 
 
    display: none; 
 
} 
 

 
.active { 
 
    background: dodgerblue; 
 
} 
 

 
.active~li { 
 
    background: lightblue; 
 
} 
 

 
.active~li::before { 
 
    background: lightblue; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
</ul>

Answer 1

です。したがって、liにスケールを適用すると、スケーリングは::beforeで追加されたラインにも適用されます。

対処：ラップ別の要素に数字、例えばspan、次いで代わりliのspanをスケーリングします。こうすることで、この行はもう影響を受けません。

li { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin: 0 1em; 
 
} 
 

 
li span { 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 2em; 
 
    height: 2em; 
 
    text-align: center; 
 
    line-height: 2em; 
 
    color: white; 
 
    background: dodgerblue; 
 
    border-radius: 1em; 
 
} 
 

 
li span:hover { 
 
    transform: scale(3); 
 
} 
 

 
li::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: .9em; 
 
    left: -4em; 
 
    width: 4em; 
 
    height: .2em; 
 
    background: red; 
 
    z-index: -1; 
 
} 
 

 
li:first-child::before { 
 
    display: none; 
 
}

<ul> 
 
    <li><span>1</span></li> 
 
    <li><span>2</span></li> 
 
    <li><span>3</span></li> 
 
    <li><span>4</span></li> 
 
    <li><span>5</span></li> 
 
    <li><span>6</span></li> 
 
    <li><span>7</span></li> 
 
</ul>

あなたがまたは追加のマークアップを使用しないことができない場合は別の方法として、あなたはまた、適切なサイズや位置付けを作成するために、li::beforeに加えてli:hover::beforeの使用を作ることができますホバリングされた円のライン。しかし、その場合はtransformを使用することをお勧めし、その代わりにli ,heightおよびborder-radiusのプロパティを代わりに上書きするだけです。