- This topic has 7 replies, 2 voices, and was last updated 4 months, 3 weeks ago by
Sebastian.
Author | Posts |
---|---|
jassheridan
July 30, 2024 at 9:18 am
|
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
July 30, 2024 at 1:28 pm
|
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, |
jassheridan
July 31, 2024 at 8:35 am
|
OK thanks. I really want the border to be above or below. Will have to rethink it 🙁 |
Sebastian
July 31, 2024 at 3:14 pm
|
If you want a top and bottom border you could use something like this:
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, |
jassheridan
July 31, 2024 at 4:19 pm
|
This is working a treat thank you so much. Do I need to be concerned about any browser compatibility with this do you think? |
Sebastian
August 1, 2024 at 12:58 pm
|
Great stuff. Pseudo elements have been supported by browsers for many years so you’re good. https://caniuse.com/?search=pseudo-elements Cheers, |
jassheridan
September 12, 2024 at 6:38 pm
|
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
September 17, 2024 at 8:31 am
|
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. Is that what you’re after? Thanks, |