Take a Look at This CSS Code for Making Underlines

A person shared a link to a site with CSS code that creates an underline around the hyperlinks on a site. The site shares a copy of the code as well as an image of what the code looks like after it is applied to the site. This designer shared the links in a large online design community that is focused on CSS. The person wanted to if other people would use it and what they thought about it.

One person said that pseudo elements is better. They also thought animating with ScaleX is a simpler and better-performing solution. These options transform instead of paint. On the other hand, they cannot do multiple lines. They shared an example of what they mean.

Someone else wrote back and said that the original poster's link is a good example of what to do when a link is so long that it goes into another line of text. Someone said they like this idea for transforming an origin to the center and that it flows better than what they have used in the past.

One person said they wanted to fork the snippet, and someone else said they wanted to paste it into their own code. A different person commented that if a designer just wants to change the color of the underline, the text decoration color is available on all browsers.

Somebody said the animation is a nice and clever solution. They think it looks better when there is no hover on the link. A person said it does not skip descending lines. Another person had criticism. They had to make the underline font bigger because it looked too thin. Fractional pixels did not work. They also noticed the problem with positioning reported by the other individual.

One person said to never use transition or at least to specify the properties if a person has to use it. An individual wanted to know if this affected performance. A different individual said that it was a superfluous animation. One person said they did something like this, but went back to the basic style. For more information click here https://i.redd.it/icoanf2vera51.png.