Enhancing Webflow CMS Collection: Adding 'Strike Through' Style to Rich Text Elements

When working with Webflow's CMS Collection, you may find yourself needing to add a 'strike through' style to a Rich Text element. This can be a bit tricky as the Webflow CMS doesn't natively support this feature. But don't fret! Let's explore how to accomplish this task using a simple workaround. Whether you're marking completed tasks or indicating discounted prices, adding a 'strike through' to your text can provide clear and effective visual cues to your users.

The Problem: No Native Support for 'Strike Through' in Webflow CMS

One of the users in Webflow's forum, masharty, encountered this issue while trying to style a couple of lines in a Rich Text element that was bound with a CMS Collection. The user wanted to add a 'strike through' style, but found that this styling was not directly supported.

The Solution: Using a Strikethrough Generator

After communicating the problem, masharty found a simple workaround. The user used a strikethrough generator to create the strikethrough text and then added that text to the Collection editor. The solution works fine, but it has one drawback: it doesn't support custom fonts for the added text. But, it's a good enough solution for now and certainly gets the job done!

Here's how you can do it:

Go to a strikethrough text generator site. There are many available online, just do a quick google search!
Type the text that you want to strike through in the generator.
Copy the generated strikethrough text.
Paste the text into your Collection editor in Webflow.

Another Possible Solution: Styling Spans in Text Fields

Another suggestion from a Webflow expert, Jeff Selser (webdev), was to create and style spans in text fields or paragraph fields. This method provides more flexibility in terms of styling, but it might require some knowledge of HTML and CSS.

Remember: Test Your Solution

One important thing to remember when implementing these solutions is to always test them across different devices and browsers. Some users have reported that the strikethrough works perfectly on desktop browsers such as Chrome and Edge, but not on mobile browsers like Safari or Chrome on iPhone12 or Samsung S20. So always make sure to check your solution on multiple platforms to ensure it's working as expected.

Adding a 'strike through' style to Rich Text elements in Webflow CMS Collection might require some extra steps, but with the right tools and a bit of patience, it's definitely achievable. Happy designing!

Pro Tip: Use CSS Pseudo-Elements for Advanced 'Strike Through' Styles

For those of you who are comfortable with coding, you can take advantage of CSS pseudo-elements for a more advanced 'strike through' style. This method allows you to customize the style of your 'strike through' even further and can be a great way to add some flair to your designs.

Here's a quick guide on how to do it:

Firstly, select the text element you want to strike through and give it a unique class name in Webflow. Let's call it "strike-through".
Then, go to your site settings and add the following custom code in the "" section of your website:

Now, all text elements with the class "strike-through" will have a red line through them. You can customize the color, thickness, and position of the line by adjusting the values in the CSS code.