feat: make pagination-nav arrows stylizable

[noomorph]

This issue stems from: facebook/docusaurus#6053

Short summary:

I'd like to stylize the pagination-nav so it looks like this:

The problem is that the arrows » are just inlined into the markup and cannot be hidden via CSS:

This is why I move them to ::before and ::after pseudo-elements, so that later on I am able to hide them completely and continue my styling described above.

[netlify]

✔️ Deploy Preview for infima ready!
Built without sensitive environment variables

🔨 Explore the source changes: d124f0c

🔍 Inspect the deploy log: https://app.netlify.com/sites/infima/deploys/61b733e824d96800083542af

😎 Browse the preview: https://deploy-preview-196--infima.netlify.app

[lex111]

Same as above -- put it inside into the already existing rule on 25 line.

[noomorph]

@lex111 I followed the suggestion with ^ selector, thanks, but maybe I'll disagree with the suggested relocation itself. Could you check out my PR once again? Doesn't it make sense to put ::before and ::after under the scope of the parent element (&__label)?

[lex111]

It's all right, thanks!

[slorber]

Hey

I'm not against this change, but IMHO it won't solve your use-case

At most you would be able to do:

And not:

(which should rather be handled with swizzle IMHO)

@lex111 feel free to merge if you consider it's a good improvement

[noomorph]

@slorber well, I'm just disabling those ::after, ::before and adding two new ones (with a background-image) to the parent container.

[lex111]

Yep, it's still a good improvement since it allows to control the arrow in pagination links.