CODEWITHSUNDEEP
htmlcssborder
petlet
petlet

Reputation: 15

Only part of border changes the color

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

Upvotes: 0

Views: 3748

Answers (3)

Rob Howells
Rob Howells

Reputation: 516

Something like this could work using 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');
})

Upvotes: 1

Gerard
Gerard

Reputation: 15786

Here a possibility without 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>

Upvotes: 0

ilkercan k.
ilkercan k.

Reputation: 33

Edit: upps. I guess you want to change just 33% percentage of the full border. I thought you want to change 33% percentage of the each span elements border. Which has almost the same width the texts.

I tried your code on Codepen but, before suggestions, let me answer your question first:

Answer:

Yes you can -kinda- achive this without JS.

You have to use these following:

1. Linear gradient borders: You can use

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

for your borders. That percentages may change as you like.

2. :active, :focus or :hover pseudo states for these spans: You can change that gradient for click (:active) state.

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

3. Adding effects: You can also use

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

for your effect.

But my suggestion:

Using :after element with position: absolute for :active state.

You can create an :after element for these spans' :active states like this:

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

You can add background to this pseudo element or you can also add normal border for this element.

If positioning not works, try position: relative for parents. This also requires display: block for spans.

Upvotes: 0

Related Questions