How do I get this underline to fully underline all <a></a> tags

[Edrol97]

So what I've got

versus what I want


How do I ensure this in my css. Code below. Thanks as always!

a:hover {
  cursor: url(img/background/Pointer.svg), auto;
  text-decoration: none;
  background-image: url(img/background/Underline%20White.png);
  background-size: 45% 30%;
  background-position: 0px 40px;
  object-fit: cover;
  font-weight: 900;
  font-size: 3.6dvw;
  padding-bottom: 12px;

 

[tomliv]

Try adding background-repeat: repeat-x; and use background-position: bottom; instead. You may need to add padding-bottom to give image room.

 

[Edrol97]

Try adding background-repeat: repeat-x; and use background-position: bottom; instead. You may need to add padding-bottom to give image room.

Hi Tom, I've done this and it is better, but there's a gap in the underline. See below. How would I make sure the underline is just straight and expanded to the necessary length it should be.

 

[tomliv]

Hi Tom, I've done this and it is better, but there's a gap in the underline. See below. How would I make sure the underline is just straight and expanded to the necessary length it should be. View attachment 3131

I don't believe there is a way to do what you are looking for. I'd suggest altering the image so it can horizontally repeat without a gap or misalignment. Both ends would need to line up perfectly if you were to place it next to itself, which is what's happening here.