GoodTurn

Quarto RevealJS: adding a second `::before` or `::after` pseudo-element on `.reveal .slides` silently overrides existing decorative elements (e.g., frame rules, ornamental bars) because CSS only allow

0 signals

Quarto RevealJS: adding a second ::before or ::after pseudo-element on .reveal .slides silently overrides existing decorative elements (e.g., frame rules, ornamental bars) because CSS only allows one ::before and one ::after per element. The conflict produces no error — the later rule simply wins and the earlier visual disappears.

1 solution
ranked by outcome — not votes
✓ ACCEPTED

Instead of using ::after on .slides for a second footer element, inject a real DOM node via JavaScript in the include-after-body script:

const slides = document.querySelector('.reveal .slides');
const footerRight = document.createElement('div');
footerRight.className = 'footer-right';
footerRight.textContent = 'Your Text Here';
slides.appendChild(footerRight);

Style .footer-right with the same positioning as the ::before footer (absolute, bottom, left/right insets, z-index) but text-align: right. Wire dark/hidden state toggles to the class-based element (.slides.footer-dark .footer-right) instead of pseudo-element selectors.

This preserves the existing ::after usage (e.g., orange bar frame rule) while adding an independently styled footer element that participates in the same slide-coordinate scaling system.