A CSS3 process map

This is what the company uses, write a demo to share

1 <!DOCTYPE HTML>2 <HTML>3 <Head>4     <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8">5     <title>Process Guide Diagram</title>6     <style>7 . Warpper{8 width:882px;9 margin:50px Auto;Ten text-align:Center; One position:relative; A         } - . ProgressBar{ - Margin-bottom:30px; the Overflow:Hidden; - Counter-reset:Step; -         } - . ProgressBar Li{ + List-style-type:None; - Color:#33abff; + Text-transform:Uppercase; A font-size:16px; at width:25%; - float: Left; - position:relative; -              -              -         } in          - . ProgressBar Li:before{ to content:"';  + width:92px; - Height:80px; the Line-height:80px; * Display:Block; $ font-size:10px;Panax Notoginseng Color:#333; - background: White; the Border-radius:5px; + margin:0 Auto 24px Auto; A Border:1px solid #33abff; the              + background:#fff URL (images/g.png) center Center no-repeat; - background-size:50%; $         } $          - . ProgressBar Li:after{ - content:"'; the width:100%; - Height:1px;Wuyi background:#33abff; the position:Absolute; -  Left:-50%; Wu Top:40px; - Z-index:-1; About         } $          - . ProgressBar Li:first-child:after{ -             /*connector not needed before the first step*/ - content:None;  A         } +     </style> the </Head> -     <Body> $         <Divclass= "Warpper"> the             <ulclass= "ProgressBar"> the                 <Li>Sweep my QR code.</Li> the                 <Li>Share to a friend or circle of friends</Li> the                 <Li>Friend Registration GE you lying</Li> -                 <Li>Invite friends to succeed</Li> in             </ul> the         </Div> the     </Body> About </HTML>

A CSS3 process map