Customise Your Dynamic Data With CSS Pseudo Classes

[@tjsayers5428]

Hadn’t tried custom css with meta data before…nice! Thank you for taking the time to make this video.😊

[@SamFrysteen]

:after and :before are pseudo elements aren’t they? Not pseudo classes 🤷‍♂️

[@PilatesinSacramento]

Agreed. Those are pseudo elements. And, although the single colon “:” works, it’s good practice to use the double colon “::” in the CSS. Anyway, thank you, Paul for showing a nice use case. 👍

[@PilatesinSacramento]

Just FYI, when I mentioned the double colon above, I’m referring specifically to pseudo elements. A single colon is correct for pseudo classes.

[@SamFrysteen]

@@PilatesinSacramento agreed - I was typing them as Paul did.

[@franktielemans6624]

::after and ::before are psuedo elements, not psuedo classes and they should have double colon instead of one.

[@arianhernandez4943]

You can even add icons to buttons, for example if you want to add an icon for the add to cart button and you don't want to create a custom loop just for that.

[@WPTuts]

Lots of use cases for sure. :)

[@v_gauther]

Really nice tips ! I go even further with it by replacing content. For traduction purpose, for example. I can change “add to cart” by “ajouter au panier”🇫🇷 with CSS Only, using after or before

[@WPTuts]

Great idea :)

[@danstevens1974]

That's great - thanks Paul. I assume a lot of page builders would have this built in with Prepend and Append type functionality?

[@ratty112]

Really useful vid 👌 also where are your star wars pictures from? I need them!

[@DaniGoMu]

Good tip Paul!!! By the way, do you have or are you going to do a tutorial on those query loops with ACF data. I am very interested. Thanks !!!!

[@WPTuts]

I'm not 100% sure what you're referring to with ACF loops. Can you explain what you're looking for? :)

[@DaniGoMu]

Hello again Paul! I was referring to the GenerateBlocks Query Loop with dynamic data (meta value) that you show in the video. I suppose they are achieved with Generateblocks + ACF, right? Do you have any tutorial to do this? Thank you.@@WPTuts

[@m31c31]

Would pseudo classes like this be the correct way to display 4 and a half stars for a custom value like "4.7"?

[@Elsteck]

Cool!

[@steala]

This is great.. however the only thing to really consider is SEO, because you wouldn't want to do this for important SEO pieces of content...

[@WPTuts]

As with all these techniques, there are times to use them and times for alternative measures. :)

[@steala]

@@WPTuts - Absolutely! But great tip, nonetheless. I use it for decorative things only. :)

[@John.Rearden]

Bricks would have had been a better builder than GB to showcase the power of Psuedo classes. Bricks handles Psuedo classes really nice.

[@WPTuts]

As I mentioned in the video, CSS it builder agnostic and you can choose to use it on any tool that let's you easily attach CSS classes. :)

[@isaac_feldman]

nice shirt