Different spacing in hyperlinks on footer links.

[pawelkierklo]

I added spaces in hyperlinks, which improved the footer's style.

Used "Beautify HTML Formatter" in VSCode

[Hlavtox]

That's not how to do spacing, you should increase the margin or padding on the list item. ;)

Moreover, I think the links without modifications look pretty good no?

[pawelkierklo]

No, where you using ::before
Only ps_customeraccountlinks.tpl haven't spaces in hyperlinks on footer.

Answer from ChatGPT:

The difference you observed is due to the addition of a ::beforepseudo-element to theaelement in your CSS. When you usea::before { content: "> "; }`, you are actually adding a small character (in this case, the ">" character, but it can be anything) before the content of the hyperlink visually. This means that "Jakiś tekst" will be displayed after the ">" character, creating a visual indication effect.

However, the actual difference between <a href="#">Jakiś tekst</a> and <a href="#"> Jakiś tekst </a> without using CSS is not visible because any additional white spaces (spaces or new lines) inside the <a> tag are treated as white spaces and are removed in the rendering process.

If you use a::before with content, it will be inserted before the content of the hyperlink, resulting in a visible difference in the displayed text, but this is the result of additional CSS styling and not the HTML tag formatting itself.`

[le-chatgpt]

Answer from ChatGPT:

Oh you guys are talking about me!

[SharakPL]

Sorry @pawelkierklo but it doesn't look like a good change. Spacing should be handled by CSS.

Closing for now, but feel free to add new commits if you come up with a better solution.

[pawelkierklo]

@SharakPL Let me give you an example for technical understanding.

This is an example where the use of ::after and ::before is important because these elements will be offset from each other by the space given in the code.

[pawelkierklo]

Please add this code to CSS

.footer .footer__block__content-list a::before {
content: '|';
}

and watch effect, only one file (ps_customeraccountlinks.tpl) haven't spaces in hyperlinks

[SharakPL]

These spaces are not intended. Actually account links are the correct ones! It's the ps_linklist that needs changes. I hope this video will explain it:

inline-spaces.mp4

If you want to add a structure to the code then this is the correct way of wrapping strings, because it generates only the string without any extra whitespaces:

And this may look a little cleaner but it's just BAD! because it adds extra spaces and makes the generated code inconsistent:

---

Besides it looks like it's the problem with your custom theme since Hummingbird doesn't use any extra characters in footer links. A simple fix for you is to always use spaces inside content:

.footer li a {
  content: "> "; /* instead of ">" */
}

This way it doesn't matter how many whitespaces are there wrapping your strings. The browser should always generate a single whitespace (I made this change at the end of the video)

[pawelkierklo]

Following this pattern, you can see that hummingbird mostly has this bug

[SharakPL]

I noticed. I'm preparing a fix for that - a general clean-up since I also found a few other problems (useless conditions, unclosed tag, duplicated attributes, etc.). It should be ready later today...

[Hlavtox]

Misclick, we should remove the spaces from account links instead. :-)