Home >Web Front-end >HTML Tutorial >More and more widely used css pseudo-classes_html/css_WEB-ITnose
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
The result is as shown in the picture;