CSS exercises-navigation bar slash delimited-using pseudo-elements

Start cutting the first picture, the first problem encountered is the top navigation bar here, with a slash split. Think of the idea is to use pseudo-class: Before or: after implementation

Write the HTML structure first.

<!--navigation bar begin -    <Divclass= "Header_right fr">    <ahref="#"class= "link">Home</a>    <ahref="#"class= "link">About</a>    <ahref="#"class= "link">Features</a>    <ahref="#"class= "link">Blog</a>    <ahref="#"class= "link">Shop</a>    <Divclass= "Alarm FR">    <imgsrc= "./images/alarm.png"alt= "Alarm" /></Images><Iclass= "Alarm_number">2</I>    </Div>    </Div> <!--Navigation bar End -

Again the style

. Link:before {content: "/"; margin:0 24px; color: grey;} . Link:first-child:before {display:none;}

First use: Bofore, set the content is "/", front and rear margin, color. Then use First-child to remove the pseudo-class that precedes the first element.

The effect is like this

It seems that there is no diagonal tilt angle in the design chart.

CSS exercises-navigation bar slash delimited-using pseudo-elements