More and more widely used css pseudo-classes_html/css_WEB-ITnose

Speaking of css pseudo-classes, students who study web front-end web design should be familiar with this. In the past, many web page special effects were mostly implemented through js. However, with the continuous development of CSS3, the use of CSS to achieve special effects on web pages not only responds well, but also reduces a lot of code. The efficiency of developing web page code has also been greatly improved. Today I will share with you some small experiences in learning CSS pseudo-classes.

For friends who are starting to get in touch with CSS, after reading other When people code, they often see :hover, :foucs, :before, :after and other related codes. In fact, these are CSS pseudo-class codes. Simply put, applying css pseudo-classes is to add a block.

Next let’s take a look at what pseudo-classes are and what their uses are:

1. Anchor pseudo-class:

a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF}

I believe the following comments should be You can see, this is relatively simple and I won’t explain it in detail

2. :before, :after:

This is the focus of what we want to talk about today, and in fact there are many very beautiful css Animation is inseparable from these two elements. Example:

: before adds a block in front of the class name. Then: after is to add a fast element

after the class name. For example, html:

we are famliy

css: .a{color:#fff;}

.a:before{

content:"";

width:30px;

height:30px

position:absoulate;

}

In this example, a blank block with a width of 30px and a height of 30px is added in front of the text. What I want to talk about here is that in the pseudo class

The positioning of elements is absolutely absolute. It cannot be anything else. You can control left: or top to position its position

content can add content, pictures, text, etc. to the quick. If not needed. content: ""; empty. But the code cannot be omitted.

Here are some real cases for everyone to understand

 

Home

About

Work

Contact

The result is as shown in the picture;