Use of pseudo classes in css3

Use of pseudo classes in css3

Objectives:

The use of the after pseudo class in css and the last-child pseudo class. And some attributes of css3.

Process:

When creating a navigation bar, you will often encounter an effect of adding a separator after each li. When the last element is reached, the delimiter will be removed.

So how to use pure css to make such an effect is very simple. Here the pseudo class of css is used.

Html section

 
 
    
  
  
Home
    
  
  
About Me
    
  
  
Portfolio
    
  
  
Blog
    
  
  
Resources
    
  
  
Contact Me
 
 

Then, call the css style

Body {background: # ebebeb ;}. nav {width: 560px; height: 50px; font: bold 0/50px Arial; text-align: center; margin: 40px auto 0; background: # f65f57; /* Create a circle */border-radius: 9px;/* create a three-dimensional navigation style */box-shadow: 0px 5px #911 ;}. nav a {display: inline-block;-webkit-transition: all 0.2 s loading-in;-moz-transition: all 0.2 s loading-in;-o-transition: all 0.2 s records-in;-ms-transition: all 0.2 s records-in; transition: all 0.2 s records-in ;}. nav a: hover {-webkit-transform: rotate (10deg);-moz-transform: rotate (10deg);-o-transform: rotate (10deg);-ms-transform: rotate (10deg); transform: rotate (10deg );}. nav li {position: relative; display: inline-block; padding: 0 16px; font-size: 13px; text-shadow: 1px 2px 4px rgba (0, 0, 0 ,. 5); list-style: none outside none;}/* use a pseudo element to create a navigation list item separation line */. nav li: after {Content: ""; position: absolute; top: 15px; right: 0px; width: 1px; height: 15px; background: linear-gradient (to bottom, # f82f87, # B0363F, # f82f87 );}/* Delete the first and last navigation separators */. nav li: last-child: after {Width: 0px; height: 0px;}. Nav a,. nav a: hover {color: # fff; text-decoration: none ;}

In css,. nav li: after indicates that an element is added after each li, which is exactly the content. (when making a gradient, NO content needs to be added, so it is empty ).

Background: linear-gradient (to bottom, # f82f87, # bo363f, # f82f87) // gradient style in css3

After adding a gradient after each li, you need to clear the last li.

The pseudo class. nav li: last-child: after is used here, and its width and height are set to 0.

Result:

Through the use of pseudo classes, it is easy to create problems frequently encountered in navigation.

In this case, there are also the use of transition animation in css3, transform deformation, background: linear-gradient (); gradient settings.