Underline Bug

I don't know why underline gets thinner then it gets bold even though it is thickness set to 5px:

.your-ruleset-here {
  text-decoration: underline;
  text-underline-offset: 0.5em;
  text-decoration-thickness: 5px;
  padding: 5px;
  transition: text-underline-offset 1s ease;

  &:hover {
    text-underline-offset: 1em;
  }
}

.your-ruleset-here {
  text-decoration: underline;
  text-underline-offset: 0.5em;
  text-decoration-thickness: 5px;
  padding: 5px;
  transition: text-underline-offset 1s ease;

  &:hover {
    text-underline-offset: 1em;
  }
}

Tested on Safari

18 Replies

b1mind•5mo ago

you can't use decoration short hand probably

Neo•5mo ago

Well, it is kinda annoying how it bugs out lol

b1mind•5mo ago

mmm nvm video was not playing for me.. I had issues with Safari and underline-offset .. let me

Neo•5mo ago

Oh :D

b1mind•5mo ago

try text-decoration-line * just to humor me cause you are not even using the shorthand really

Neo•5mo ago

I have seen it on Kevin's video but I totally forgot it to be honest :D

b1mind•5mo ago

sry line not style xD

Neo•5mo ago

isn't line for above, bottom?

b1mind•5mo ago

also I think thichness is not support in FF/Android 😄 no its just the full property

Neo•5mo ago

It didn't really work

b1mind•5mo ago

text-decoration is short hand for all the properties

Neo•5mo ago

On 10px I guess webkit doesn't support it yet oh wait lemme use webkit xD

b1mind•5mo ago

I would just use a border bottom 😄

Neo•5mo ago

well, I want like space between line and text increase which I should use padding but then whole navbar gets padding :D

b1mind•5mo ago

you can figure it out 💪 its a common thing so, plenty of examples if you get stuck

Neo•5mo ago

yep, there is no wwebkit

b1mind•5mo ago

oh you mean prefix ? correct none

Neo•5mo ago

well, I can also use pseudo to create something like that too But I wanted to try out decoration :D and it seems like, it still has to be updated by devs

Gaming

Programming

Underline Bug