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
b1mind13mo ago
you can't use decoration short hand probably
İbrahim
İbrahimOP13mo ago
Well, it is kinda annoying how it bugs out lol
b1mind
b1mind13mo ago
mmm nvm video was not playing for me.. I had issues with Safari and underline-offset .. let me
İbrahim
İbrahimOP13mo ago
Oh :D
b1mind
b1mind13mo ago
try text-decoration-line * just to humor me cause you are not even using the shorthand really
İbrahim
İbrahimOP13mo ago
I have seen it on Kevin's video but I totally forgot it to be honest :D
b1mind
b1mind13mo ago
sry line not style xD
İbrahim
İbrahimOP13mo ago
isn't line for above, bottom?
b1mind
b1mind13mo ago
also I think thichness is not support in FF/Android 😄 no its just the full property
İbrahim
İbrahimOP13mo ago
It didn't really work
b1mind
b1mind13mo ago
text-decoration is short hand for all the properties
İbrahim
İbrahimOP13mo ago
On 10px I guess webkit doesn't support it yet oh wait lemme use webkit xD
b1mind
b1mind13mo ago
I would just use a border bottom 😄
İbrahim
İbrahimOP13mo ago
well, I want like space between line and text increase which I should use padding but then whole navbar gets padding :D
b1mind
b1mind13mo ago
you can figure it out 💪 its a common thing so, plenty of examples if you get stuck
İbrahim
İbrahimOP13mo ago
yep, there is no wwebkit
b1mind
b1mind13mo ago
oh you mean prefix ? correct none
İbrahim
İbrahimOP13mo 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

Did you find this page helpful?