Closed pawelkierklo closed 10 months ago
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 the
aelement in your CSS. When you use
a::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.`
Answer from ChatGPT:
Oh you guys are talking about me!
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.
@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.
Please add this code to CSS
.footer .footerblockcontent-list a::before { content: '|'; }
and watch effect, only one file (ps_customeraccountlinks.tpl) haven't spaces in hyperlinks
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:
https://github.com/PrestaShop/hummingbird/assets/5007456/6dd64525-f602-46cb-bb1d-14e02d125724
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)
Following this pattern, you can see that hummingbird mostly has this bug
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...
Misclick, we should remove the spaces from account links instead. :-)
I added spaces in hyperlinks, which improved the footer's style.
Used "Beautify HTML Formatter" in VSCode