Can you set border as a percentage

Author Posts

jassheridan

Hey… I’m using a bottom or top border to accent a heading. is it possible to add a percentage attribute so the line only goes to say 80% of the width of the heading?


Sebastian

No, unfortunately that isn’t possible with regular borders. The normal solution is to use a ::before or ::after pseudo element that is aligned to one side and only has say 80% width or height of the element.

See this thread here for an example:

https://stackoverflow.com/questions/4131490/any-way-to-limit-border-length

Any issues, let me know.

Cheers,
Sebastian


jassheridan

OK thanks. I really want the border to be above or below. Will have to rethink it 🙁


Sebastian

If you want a top and bottom border you could use something like this:

.my-selector {
    position: relative;
}
.my-selector::before,
.my-selector::after {
    content: '';
    display: block;
    width: 80%;
    height: 2px;
    background-color: red;
}

You can then adjust the values however you like. And if necessary add absolute position to the pseudo elements for more control.

Does that helps at all?

Cheers,
Sebastian


jassheridan

This is working a treat thank you so much. Do I need to be concerned about any browser compatibility with this do you think?
Thanks again


Sebastian

Great stuff. Pseudo elements have been supported by browsers for many years so you’re good.

https://caniuse.com/?search=pseudo-elements

Cheers,
Sebastian


jassheridan

Hi Sebastian, this fix as worked great – I’m on another project. Can you steer me towards how I would make the colours transparent 50% for example?


Sebastian

Hey Jass,

Apologies for the slow reply, I’ve been off work Fri-Mon this week.

If you use the color picker in Micorhtemer, you can simply drag down the opacity of the RGBA color.

Micorthemer color picker with opacity slider

Is that what you’re after?

Thanks,
Sebastian

You must login or register to reply to this topic.