Hello,
I couldn’t really find a relatable topic like this, so i hope I’m right here.
I would like to create a menu & button hover with a stroke interaction(?) like this:
Is this possible with Webflow and if so what is the best way to build this?
Thanks for the help!
Enomis
Here is my public share link: Webflow - Enomis Portfolio
HI @Enomis and welcome on WF Forum. When you open website in devTools you can see how it is done. These"strokes" is just plain text added to text element to :before and :after.
These text elements have applied CSS properties as text-fill-color and text-stroke-color
Answer to your question is yes it is possible but it need a bit of custom code.
Hello @Stan thanks for the reply!
Ok I think halfway I understand it but where to I put the before and after elements? In the Webflow Selector when I name the text or in the Custom Code? E.g. my class name is .text-outline
And there is an active state as well: qodef-m-item.qodef–active .qodef-e-title:before
and a normal state: .qodef-m-item .qodef-e-title:before
Sorry I’m not a coder, so that is not clear to me.
Thanks so much for the help.
HI @Enomis here is example in CodePen. code can be applied to embed element or page setting or project setting. If you do not know how to apply code please visit WF University to get basic understanding the differences and where to place CSS and where JS.
Reason I have done it in Codepen is that you have all code in one place to see what and how. I will personally also use only plain code instead of splitting CSS between WF GUI and custom code that will create mess and hard to find and debug possible problems.
JS is only a few lines to automatically take heading text and apply this value into ::before and ::after vial custom attribute. Again this is not possible create with functionality that WF offer.
Hope this helps.
Hello @Stan Thank so much this is amazing! I know where to put the code and of course it makes sense to have the custom code in one place but my no-code brain thought maybe I can do part of it somehow over WF 
.
Thank your for the explanation!
I think you can do this by placing the text on top of each other and using the “absolute” position in a “relative” container.
You have to use the internal shadows on the font with a blur of 0 and use several shadows. Then you create an interaction on hover on and of to move and make the shadow font appear
A quick example.
https://romualds-superb-site.webflow.io/
I will delete this when I try another thing…
hi @Enomis you can split CSS to make some parts in WF GUI and rest with custom code as WF doesn’t support natively ::before and ::after its up to you how you will implement it into project. JS functionality is just Christmas bonus 
If this solved your issue feel free to close your request as solved 
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.
