Pseudo-Elements

::before and ::after without leaving NyxCode.

before and after

Add pseudo-elements inside style blocks. They compile to scoped ::before and ::after CSS:

section { style { position relative padding 2rem before { content "" position absolute top 0 left 0 width 100% height 3px bg linear-gradient(90deg, #667eea, #f093fb) } after { content "" position absolute bottom 0 right 0 width 50px height 50px bg radial-gradient(circle, rgba(102, 126, 234, 0.2), transparent) } } h1 "Decorated section" }

Hover and focus

Pseudo-classes work the same way inside style blocks:

button { style { bg #667eea color white padding 0.75rem 2rem radius 8px border none cursor pointer transition all 0.2s ease hover { bg #7b93ff transform translateY(-2px) shadow 0 4px 12px rgba(102, 126, 234, 0.4) } focus { outline 2px solid #667eea outline-offset 2px } } "Click me" }

Pseudo-elements compile to real CSS ::before/::after with content:'' auto-added if not specified.

← Reactivity Animations →