html - 只有部分边框改变了颜色

Question

我只想更改底部边框 1/3 的颜色，并且我希望它仅在有人单击文本(夏季、 Spring 或冬季)时更改。是否可以仅使用 CSS(使用之前或之后的伪元素)做这样的事情，还是在这种情况下我必须使用 JS？

HTML:

<div class="seasons">
        <span id="text1">Summer</span>
        <span id="text2">Spring</span>
        <span id="text3">Winter</span>
</div>

CSS:

.seasons {
    color: #B5BAB8;
    display: inline-block;
    margin: 10px;
    border-bottom: 2px solid #B5BAB8;
    padding-bottom: 15px;
    margin-top: 465px;
  }

  .seasons span { 
    width: 250px;
    display: inline-block;
  }

Answer 1

类似于 this可以使用 JS

CSS

.seasons {
    color: #B5BAB8;
    display: inline-block;
    margin: 10px;
    margin-top: 465px;
}

.seasons span { 
    width: 250px;
    float: left;
    padding-bottom: 15px;
    border-bottom: 2px solid #B5BAB8;
}

.seasons span.highlighted { 
    border-bottom-color: red;
}

JS

$('.seasons span').on('click', function() {
    $('.seasons span').removeClass('highlighted');
    $(this).addClass('highlighted');
})