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•10mo ago

you can't use decoration short hand probably

Neσ许OP•10mo ago

Well, it is kinda annoying how it bugs out lol

b1mind•10mo ago

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

Neσ许OP•10mo ago

Oh :D

b1mind•10mo ago

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

Neσ许OP•10mo ago

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

b1mind•10mo ago

sry line not style xD

Neσ许OP•10mo ago

isn't line for above, bottom?

b1mind•10mo ago

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

Neσ许OP•10mo ago

It didn't really work

b1mind•10mo ago

text-decoration is short hand for all the properties

Neσ许OP•10mo ago

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

b1mind•10mo ago

I would just use a border bottom 😄

Neσ许OP•10mo ago

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

b1mind•10mo ago

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

Neσ许OP•10mo ago

yep, there is no wwebkit

b1mind•10mo ago

oh you mean prefix ? correct none

Neσ许OP•10mo 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