Jump to content

How do I change the length of a border and split it to put an icon in the middle


remy

Recommended Posts

I want to do what this codepen does with borders

he makes a </> symbol at the end of this first border, in the middle of the end, and his two last borders are split with </> in the middle of them. I know I can make a div and make it like a border, then place an image next to it to make it look like this, or make two divs with an image in the middle, but in the codepen it doesn't look like he does that and it seems messy to make all those divs for an effect like this. But I'm new to coding so I can't find out in his code where he makes the borders like that (----------</> , -------</>--------). Can anyone help me out on how to make a border like he does? I will greatly appreciate any help.

 

His borders are also a different length from his text, I want to know how he does this. I think his borders are either an image or a div, but I'm not sure from looking at his code. I think it might be the javascript too, but I can't tell because I haven't learned any javascript yet.

Link to comment
Share on other sites

There's an :after pseudo-element with a background color the same as the page's background color which is positioned in front of an unsplit border.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...