Pseudo Elements Image Separators

[aftabn10]

Hi, I am looking for some help in creating a navigation with image separators with pseudo elements.

An example of a menu that I would like is shown below:

(image1(separator) HOME (image2(separator) ABOUT US (image2(separator) PRODUCTS (image2(separator) CONTACT US (image3(separator)

Apologies as I have written on code or css, just trying to get some help in how i can achieve this using pseudo elements as never used them before.

If somebody could show me an example on how i can achieve this, would really appreciate it.

Thanks in advance

[Paulie_D]

You can make the menu in Codepen.io without the separators can’t you?

We can deal with the pseudo elements after we see what you have so far.

A quick search on this site will find a lot of what you are after.

[aftabn10]

Thanks Paulie_D, I have created a menu in codepen at the following location:

http://codepen.io/anon/pen/sjfHJ

Thanks once again for all your help.

[stefan_rakieta]

I still don’t have clue what do you want to do with it. If you don’t want the first element to be separated from the border of the screen when you put margin in all of those elements just use :first-child pseudo element and give it margin: 0px

[Jimmy]

without giving away too much, could the code for spacing using pseudo elements involve :nth-child(n+1)? I am trying to learn through talking in the forums =P

[Paulie_D]

I’d go something like this

http://codepen.io/Paulie-D/pen/qtmzC

The red area is where you put the separator image as a background image and using background positioning and sizing as appropriate/required.

The size of the separator area is entirely up to you you just have to change the padding acccordingly.

It’s not the only way, you could put the separators after the li rather than the anchors` but there’s not a lot in it…to my mind.

[aftabn10]

Thanks guys for your responses. Apologies as doesnt sound very clear as to what i require.

Paulie_D, the example you have showed is what I require, but on top of that I would like to have another image before the home button and a 3rd image that is used after the contact button.

Like:

black area HOME red area ABOUT US red area …CONTACT green area

Hope thats a bit more clearer.

Thanks once again for all your help guys

[Paulie_D]

Simple enough, you can use another pseudo element (::before) for those list items using the same techniques.

Try it…if you have any issues, come back.

[aftabn10]

Thanks Paulie_D, I edited my original pencode with your code and the additional code for the first-child and last-child.

http://codepen.io/anon/pen/sjfHJ

Just going try this with the background images now.

Thanks once again.

[Author]

Posts