只有部分边框改变了颜色

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

Answer 2

编辑： upps。我猜你只想更改整个边框的 33%。我以为您想更改每个跨度元素边框的 33% 百分比。与文本的宽度几乎相同。

我在 Codepen 上试过你的代码，但在提出建议之前，让我先回答你的问题：

答案：

是的，你可以 -kinda- 没有 JS 就可以做到这一点。

您必须使用以下这些：

1。线性渐变边框： 您可以使用

linear-gradient(to right, rgba(255,0,0,0) 0%, rgba(255,0,0,1) 100%);

为了你的边界。该百分比可能会随您的喜好而变化。

2。 :active、:focus 或 :hover 这些跨度的伪状态： 您可以更改单击 (:active) 状态的渐变。

linear-gradient(to right, rgba(255,0,0,0) 30%, rgba(255,0,0,1) 70%);

3。添加效果： 您也可以使用

transition: all .3s ease-in-out;

为了你的效果。

不过我的建议是：

将 :after 元素与 position: absolute 一起用于 :active 状态。

您可以为这些跨度的 :active 状态创建一个 :after 元素，如下所示：

span:active:after{
    content:"";
    display: block;
    position: absolute;
    bottom: 1px;
    width: 100px;
    height: 5px;
    display: block;
}

您可以为该伪元素添加背景，也可以为该元素添加普通边框。

如果定位不起作用，尝试 position: relative 换 parents。这也需要 display: block 的跨度。

Answer 3

这里有一个没有 JS 的可能性。

input[type="radio"] {
  display: none;
}

label {
  cursor: pointer;
  border-bottom: 3px solid #0ff;
}

label:not(:last-child) {
  margin-right: 1em;
}

input[type="radio"]:checked+label {
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(to right, #f0f 0%, #f0f 33%, #3acfd5 33%, #fff, #3acfd5 34%, #0ff, 34%, #0ff 100%);
  border-image-slice: 1;
}

<div class="seasons">
  <form>
    <input id="summer" name="season" type="radio" value="summer">
    <label for="summer">Summer</label>
    <input id="spring" name="season" type="radio" value="spring">
    <label for="spring">Spring</label>
    <input id="winter" name="season" type="radio" value="winter">
    <label for="winter">Winter</label>
  </form>
</div>

只有部分边框改变了颜色

Only part of border changes the color

html

css

border

答案：

不过我的建议是：