[Feature]: Support pseudo-classes and pseudo-elements

[Nik0w]

Problem

Hi again,

I would like to suggest adding support for pseudo-classes and pseudo-elements in Instatic CMS.

Problem

At the moment, it does not seem possible to define styles for element states such as hover, active, or focus. It also does not seem possible to style pseudo-elements like ::before and ::after.

This makes it difficult to create more advanced and polished web interfaces directly from the CMS.

Expected behavior

It would be very useful to have access to style states such as:

:hover
:active
:focus
:visited, when relevant

It would also be useful to support pseudo-elements such as:

::before
::after

For example, a button could have a different background color on hover, an underline animation using ::after, or decorative content added with ::before.

Why this matters

As a web developer with more than 10 years of experience, I consider pseudo-classes and pseudo-elements essential for modern web design.

They are widely used to create interactive states, micro-interactions, visual feedback, decorative elements, transitions, and accessibility-friendly focus styles.

Without them, many common design patterns require custom CSS outside the CMS, which reduces flexibility for both developers and content editors.

Proposed solution

Possible implementation

This could be added as a state selector in the style editor, allowing users to switch between the default style and states like hover, active, and focus.

For pseudo-elements, the editor could provide dedicated ::before and ::after sections where users can define properties such as content, position, size, background, border, transform, and transitions.

Thanks again for your work on Instatic CMS. I think this feature would make the styling system much more complete and powerful.

Alternatives considered

No response

Area

Visual editor

[DavidBabinec]

Pseudos and other states are allowed. You can write any kind of selector you want, not only single class. As long as it matches your element, it will show up in the list and you can use it. You can even do nested CSS this way, or target multiple selectors using comma.

[Nik0w]

Oh! Great, thanks a lot! So, I think the only issue is having to include the '.' for the class? In the example, writing 'btn:hover' doesn't work, but '.btn:hover' does, even though the btn class already exists on the element.

[DavidBabinec]

That's right, because you can also use other selectors that CSS allows not only classes, eg "H1" - or you can do ".btn > img" etc. so it remains flexible.