Join the Webstudio community

Updated 7 months ago

pseudo elements?

At a glance

The post asks how to create :before and :after pseudo elements. The comments discuss the limitations of the current CSS capabilities in the Webstudio platform, and compare it to the features of Bricks Builder, which allows for more customization and control over CSS. Community members suggest that Webstudio could benefit from adding support for CSS variables, custom pseudo selectors and pseudo elements, and bindings for CSS values to provide more flexibility for users.

Useful resources
How do I create :before and :after pseudo elements?
1
J
B
j
10 comments
HTML embed component with custom css
@jrdxr What is your use case? You can put an additional box in your instance instead of pseudo elements.
Mainly just curious about the builder.

This may not be the place to leave this comment, but I think there’s some inspiration to find from Bricks Builder. One being their custom CSS section on individual elements and for individual classes.

I find the select option for “advanced” css to be limiting.
Are you talking about being able to use any selector including descendands, pseudo elements etc? You are being extremely vague right now.
Yes, just being able to write completely custom CSS on an element or a token.

Bricks builder has a code area at the bottom of any element and you can use %root% to dynamically refer to the class or ID.

It even applies to the breakpoint you’re on. Really powerful. Would love to see that in Webstudio!

I understand Webstudio probably has very different philosophy that is over my head.. but just an immediate thing I personally felt was lacking.
Not sure how aware you guys are of bricks builder but you can try it for free here https://try.bricksbuilder.io.

I think if Webstudio combined the best parts of webflow, bricks builder, and what’s already so great and unique about Webstudio, it would absolutely take over. Though it probably will regardless!
Yes, just being able to write completely custom CSS on an element or a token.

There are things in CSS that make your CSS unmanageable. We are protecting our users against such things. Example of that is nested selectors.

There are some other things like psuedo elements - these are ok, we just need to add support for them.
Bricks builder has a code area at the bottom of any element and you can use %root% to dynamically refer to the class or ID.

This is a foodgun. You can do footguns in html embed component, but style panel is a safe way to manage styles.
I think if Webstudio combined the best parts of webflow, bricks builder, and what’s already so great and unique about Webstudio, it would absolutely take over. Though it probably will regardless!


It already did for the most part. You just need to learn more about how we solve things.
Things webstudio curently misses in CSSS that will completely solve all the issues:

  1. css variables
  2. custom pseudo selectors and pseudo elements
  3. bindings for css values
Add a reply
Sign up and join the conversation on Discord