I want to change the color only of 1/3 of the bottom border and i want it to be changed only when someone clicks on the text (summer, spring or winter). Is it possible to do something like this with only CSS (with pseudo-elements like before or after) or do i have to use JS in this case?

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;
  }

```