Can you provide a clear tutorial on how to add before and after pseudo elements to a button in Webflow?
- Assign a custom class to your button in Webflow.
- Add a
<style>tag with::beforeand::afterCSS inside an Embed element or in Page/Project Settings. - Publish the site to see the pseudo-elements applied, as they won't appear in the Designer.
You can add ::before and ::after pseudo-elements to a button in Webflow by using custom code, since Webflow’s visual styling tools don’t support pseudo-elements by default.
1. Add a Custom Class to Your Button
- Select your button in the Webflow Designer.
- In the Style panel, give it a unique class name—for example, button-with-pseudo.
2. Add an Embed Code Element for Styling
Drag an Embed element (from the Components panel) into your page, ideally in the Page Settings or just above your section.
Inside the Embed, include a
<style>tag with CSS targeting your button's class and the::before/::afterelements.Example (adjust as needed):
```html
```
Save & Close the Embed.
The changes will not be visible inside the Designer, but will appear on the published site.
3. Publish the Site to See Changes
- Click Publish in Webflow and view the live site.
- Your button with the class button-with-pseudo will now show the custom before and after pseudo-elements.
4. Optional: Scope the Custom Code to Page or Site
- To apply this across the entire site:
- Open Project Settings → Custom Code → paste the
<style>block in the Head section. - To apply only on a specific page:
- Open Page Settings (gear icon) → add the CSS under Inside Head Tag.
Summary
To use ::before and ::after pseudo-elements on a button in Webflow, assign a custom class to the button and inject your CSS using an Embed element or custom code block. Webflow won’t render these in the Designer, but they’ll show correctly once published.