Dynamic Content with Pseudo Element (::after)

How To
1

I’m trying to add dynamic data, specifically a date over an image, using a pseudo element ::after and dynamic data in the content box as shown below:

image

Here is the element in the structure pane:

image

If I add ‘test’ text in the content box it displays. If I add the data selector to a basic text element the desired date renders.

Here is the site for what its worth

https://staging.forestretreats.co.uk/
pw jacqui

Any help appreciated.

Thanks

ps I’ve tried without the “” too

2

@mackarias , the pseudo class ::after can only take some css formating and the content can only be text. That’s why your text ‘test’ displays. You would have to duplicate the styings form the class .calendar-card_head to the style for the ::after.
You should try to set the surrounding element to position:relative and the dynamic data field to position:absolute. This way you can position your date with the values top, right, bottom, or left, whatever is needed to position it correctly.

1 Like
3

Hey David, thanks for your reply. So the expected dynamic data is in fact text - just a date. And presumably as the pseudo elements have a content field with dynamic data option in Bricks this should work?

And thanks for your suggestion, that is my back-up plan if this doesn’t work

4

No, dynamic data will probably not work. With text I mean really typed text.
You would have to get that in the page template with PHP code separately from the database and then output a style. But for the fact that you can easily solve it with the absolutely positioned element, it is not worth it and for the performance it would not be beneficial.

1 Like
5

OK, so my question still stands - why would Bricks include the option for dynamic data for pseudo elements if it wont work?