Rob was the inspiration behind my first blog when he wrote a few days ago (30th January 2022), on the Webflow forum asking for help on how to do the "superscript and orange square":
Hey, I’m trying to work out how to create the orange square seen on the image attached. It’s supposed to be in a running paragraph of text. When rolled over it will show another div with text and link. Love any ideas on how to approach this. Thanks!
Having experienced multiple times not finding answers to a lot of my questions, at the beginning of my Webflow journey, I felt I just had to respond.
The question was a good one, and why it caught my attention. Anything is possible, of course, but can it be done easily on the no-code platform Webflow?
Yes, it can. And here’s the first option; it is not creating a <div> inside of paragraph <p> ―although, in theory, this approach has two divs:
<div>This is the text<div>orange square</div>and the text continues</div>
However, the above option has two downsides:
1. It will not work with dynamic content.
2. It is not a no-code (or visual code) solution.
But, worry no more, I have found a better solution in 3 easy steps: