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

Design help Custom code
1

Hi,

I am searching for a way to add inline text on hover. Like this…
https://stackoverflow.com/questions/26685904/adding-character-on-hover-without-moving-text

…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: [DEAD LINK REMOVED - by @webdev]

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:

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

6

Hello Noah-R,
I am new to Webflow, and want ::after class to my heading. Will you please let me know? Your video links are not working . I tried adding custom code that too is not working. Below is the custom code :
.About-heading::after{
content:“”;
position:absolute;
bottom:11px;
right:55px;
width:40px;
height:7px;
background-color:blue;

}

7

Hello Kirti,

First off, welcome to the community. It’s great to have you. I know my other links broke as a result of deleting my old account with that capture software. However, I have recorded a new one for you and anyone else in this thread looking to understand how you can use the pseudo selector to add characters before or after any text content. It’s a little long, but thorough :wink:

I hope this helps!

Watch video here: CSS Pseudo Characters

All the best,
– Noah

8

Hello Noah-R, Just watched your video about pseudo selectors. Now I have clear understanding of how to embed custom code .
A big thank you for this special video!!
Thanks,
Kirti

9

Hey Kirti,

My absolute pleasure! Really glad that was helpful for you!
Have an amazing weekend!

Cheers,
– Noah