How to set style for pseudo elements (:after and :before)
Do you mean during the editing? Do you see it good if you deselect the component?
Read full answer below ↓Question
Hi, I add STATE in style manager :before and :after but all the styles are applied to the component.
Answers (3)
Do you mean during the editing? Do you see it good if you deselect the component?
Yes during the editing. My idea was to implement the pseudo elements. When you select component to select state like hover, but to be :after or :before. The problem is that I need to set content: '' in the css rule and all the styles are applied on the main element.
Ok but is it correct once you deselect the component?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #364
Sort How Block Categories are displayed.
Is there a method to set how the categories are shown in the Block tab?
Issue #1368
Resize canvas
Is there a way to have a dynamic resizing of the canvas? i.e not using the Device Manager, but having a drag and drop of the width, similar...
Issue #1909
SetComponents is sometimes very slow
Hi all We're working on a newsletter app and are using grapesjs as the email editor with the newsletter preset plguin and some custom chang...
Issue #3525
FEAT: In Style Manager, Allow Requiring the Default Setting
What are you trying to add to GrapesJS? The CSS property float only makes sense for position: static; elements, which happens to be the def...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.