How to make a multi step header

Tags: css,html5,jquery-mobile

Problem :

I am trying to make a header of multistage form containing the page number and description .

What I want to do is divide each step with an arrow mark something like this

1 step > 2tep > 3 step> 4 step 

This is mostly a css question I just need to know how to make those boder into arrow sign



As you can see in the fiddle I have icons that changes to check mark when you slide to next step . So I am trying to separate these icons with > arrow and then add some css background colors to separate the active,previous, next steps

Solution :

Looking at your fiddle, does this do what you want?

.divider:before { content: ">"; }

    CSS Howto..

    How do you measure the height of a HTML element scaled with CSS3 transform?

    How To Wrap A Div When Parent Container Shrinks Using CSS

    simplest slideshow using html, css toggling visibility of each div tag

    How to create CSS internal style sheet in CakePHP

    How can I show hidden element when it has focus?

    How to apply css to buttons inside gridview

    “Pull center” in Bootstrap: A -D- B -E- C columns collapsing to A-B-C // D-E, how to get B between D and E?

    How to remove scroll bar using overflow CSS HTML (Possible Positioning Conflict)

    How do I make my background-color fill entire width of div when applied to a `ul li`?

    how to apply css to extjs grid emptytext?

    How to place text over different images with different positions?

    How do i resize an image based on its div width? [duplicate]

    How to move an element styled by CSS stylesheet?

    How to assign color obtained by CSS gradient generator

    How to style the values in a textfield using CSS?

    css: How to select first anchor tag inside table

    How to disable custom animations from click, angular?

    How to get row of floated images inside a div element to resize with browser window

    Disappearing div using JQuery - how do I stop it from reloading next time a page is opened

    How do I prevent a JQuery UI menu from floating?

    How to center navbar elements vertically (Twitter Bootstrap)?

    How to make a resizable menu centered on the middle?

    How to make content shareable from a static website

    How do I properly inspect jquery and javascript using web developer tools?

    How to stop ReSharper removing spaces after css properties

    How to make an external HTML file not appear in the home page?

    How to use Bootstrap3 media queries for custom CSS? [closed]

    How to make the new long shadow trend with CSS?

    Custom Javascript and css added to Wordpress, however, still not working

    How do I differentiate between two different images in the same class in my CSS file