Streaming live at 10am (PST)

Adding ::before & ::after Pseudo Content on Hover


#1

Hi,

I am searching for a way to add inline text on hover. Like this…

…only in webflow, of course.

Thanks in advance
Jacob


#2

Hey there!
I made a video showing you how to achieve this easily in Webflow. Hope this helps!

Video: https://cl.ly/bb9075b14aac

Cheers!
-Noah


#3

Hi J_Canan,

Thank you so much for helping out! I did help! However – and sorry for being a bit unclear…
Actually, I was searching for a way to add text/character before the list-item. Like the one shown here:
https://jsfiddle.net/Tankucukhas/bobqowde/1/

I had somehow hoped it was possible to add characters (like are bullet, a dash or so) as a hover-state…

Best and thanks again
Jacob


#4

Yeah it’s definitely possible with the ::before and ::after pseudo selectors. You have to target the class you give for the list item or ‘a’ link. and simply add ::before selector after the class and then make sure one of the properties is content: ’ ’ and that’s where you will add your content.

Here is a video showing you: https://cl.ly/64b7909b308e

Here is the CSS code you will add and change the “your-class” to whatever class you named your links:

<style>
	a.your-class:hover::before {
  	content: '> ';
    }
</style>

In the video you’ll notice I tried to add a transition to the ‘Content’ property itself but as soon as I stopped recording I realized that you can’t actually do that with any content property. Only to the styles of the content itself like width, height, opacity etc.

If you want some kind of transition you can use this and tweak it to your liking:

<style>
	a.newlink::before {
  	content: '> ';
    opacity: 0;
    margin-right: -10px;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
  }

	a.newlink:hover::before {
  	content: '> ';
    opacity: 1;
    margin-right: 0px;
  }
</style>

Transition Video: https://cl.ly/391f344eca86

Hope this helps you! :grin:
-Noah


#5

Hi Noah,

Yes, it works! Thank you so much! And also thanks for opening my eyes for the custom code section.
Much appreciated!

Jacob