您可以使用伪元素和相邻的同级选择器（~）来实现此效果，而无需额外的标记：
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::before{ content: ''; position: absolute; top: .9em; left: -4em; width: 4em; height: .2em; background: dodgerblue; 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>
