当前位置:网站首页>Pseudo class elements -- before and after
Pseudo class elements -- before and after
2022-07-05 10:20:00 【Pursue ~】
List of articles
before/after
A pseudo class is equivalent to inserting two additional tags inside an element , Its most suitable and recommended application is graphics generation . In some exquisite UI Implementation , Can be simplified HTML Code , Improve readability and maintainability . Effect use :
Small icons like this are mostly used before,after To achieve , Not only simple but also convenient .
1. Basic usage
:before and :after The function of is to specify the element content ( Not the elements themselves ) Insert a containing before or after content Attribute specifies the inline element of the content , The basic usage is as follows :
#example:before {
content: "#";
color: red;
}
#example:after {
content: "$";
color: red;
}
Both of these pseudo classes belong to inline elements , But with display:block; Attribute can convert it into a block element , The more common usage is some implementation of styles , There is also the effect of clearing floating ..
2. Style modification
The code is as follows :
<div class="quote">
<span> Fight tiger </span>
</div>
.quote:before,.quote:after{// Use these two pseudo classes to realize style rendering
content:"";
display:inline-block;
width:5%;
margin:5px 1%;
border-bottom:1px solid blue;
}
3. Remove the floating
The code is as follows :
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="parent2">parent2</div>
//css Code
.son1{
width:300px;
height:200px;
background-color: lightgray;
float:left;
}
.son2{
width:300px;
height:100px;
background-color: lightblue;
float:left;
}
.parent2{
width:400px;
height: 400px;
background-color:blue;
color:#fff;
text-align:center;
line-height:400px;
font-size:30px;
}
If you add this code to the above code to clear the float, you will achieve a different effect :
.parent:after{
content:"";
display:block;// Set as block element
clear:both; // Use this property to clear the float
}
::before and ::after Endemic content, Used in css Add content to the logical head or tail of an element in rendering .
These additions will not appear in DOM in , Will not change the content of the document , Do not copy , Just in css Render layer added .
So don't use :before or :after Show meaningful content , Try to use them to show decorative content , For example, icons .
Be careful : In the use of before and after when content essential .
Be careful : In the use of before and after when content essential .
Be careful : In the use of before and after when content essential .
5.content attribute
::before and ::after Must cooperate content Attribute to use ,content Used to define what to insert ,content It must be worth , At least it's empty . By default , Of pseudo class elements display Is the default value inline, Can be set by display:block To change the display .
content Take the following values .
1、string
Wrap a string in quotation marks , A string will be added to the element content . Such as :a:after{content:""}
<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
p::before{
content: "《";
color: blue;
}
p::after{
content: "》";
color: blue;
}
</style>
<p> Ordinary world </p>
2、attr()
adopt attr() Call the properties of the current element , For example, the picture alt Prompt text or link href The address is displayed .
<style type="text/css">
a::after{
content: "(" attr(href) ")";
}
</style>
<a href="http://www.cnblogs.com/starof">starof</a>
3、url()/uri()
Used to reference media files .
give an example :“ Baidu ” Here is a picture , It's given later href attribute .
<style>
a::before{
content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");
}
a::after{
content:"("attr(href)")";
}
a{
text-decoration: none;
}
</style>
---------------------------
<body>
<a href="http://www.baidu.com"> Baidu </a>
</body>
4、counter()
Call counter , You can implement the serial number function without using list elements .
coordination counter-increment and counter-reset Attributes use :
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
<style>
body{
counter-reset: section;
}
h1{
counter-reset: subsection;
}
h1:before{
counter-increment:section;
content:counter(section) "、";
}
h2:before{
counter-increment:subsection;
content: counter(section) "." counter(subsection) "、";
}
</style>
------------------------------------------------
<body>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
边栏推荐
- [system design] index monitoring and alarm system
- TypeError: Cannot read properties of undefined (reading ‘cancelToken‘)
- 【小技巧】獲取matlab中cdfplot函數的x軸,y軸的數值
- > Could not create task ‘:app:MyTest.main()‘. > SourceSet with name ‘main‘ not found.问题修复
- The horizontally scrolling recycleview displays five and a half on one screen, lower than the average distribution of five
- 天龙八部TLBB系列 - 单体技能群伤
- Redis如何实现多可用区?
- PHP solves the problems of cache avalanche, cache penetration and cache breakdown of redis
- 【黑马早报】罗永浩回应调侃东方甄选;董卿丈夫密春雷被执行超7亿;吉利正式收购魅族;华为发布问界M7;豆瓣为周杰伦专辑提前开分道歉...
- Learning II of workmanager
猜你喜欢
StaticLayout的使用详解
一个程序员的职业生涯到底该怎么规划?
ConstraintLayout的流式布局Flow
最全是一次I2C总结
The most complete is an I2C summary
[论文阅读] KGAT: Knowledge Graph Attention Network for Recommendation
Cerebral cortex: directed brain connection recognition widespread functional network abnormalities in Parkinson's disease
A high density 256 channel electrode cap for dry EEG
Window下线程与线程同步总结
How does redis implement multiple zones?
随机推荐
Swift set pickerview to white on black background
How to plan the career of a programmer?
【观察】跨境电商“独立站”模式崛起,如何抓住下一个红利爆发时代?
ByteDance Interviewer: how to calculate the memory size occupied by a picture
伪类元素--before和after
C#函数返回多个值方法
> Could not create task ‘:app:MyTest. main()‘. > SourceSet with name ‘main‘ not found. Problem repair
C语言实现QQ聊天室小项目 [完整源码]
Swift tableview style (I) system basic
Design and Simulation of fuzzy PID control system for liquid level of double tank (matlab/simulink)
Shortcut keys for vscode
@SerializedName注解使用
How does redis implement multiple zones?
Tianlong Babu TLBB series - about items dropped from packages
学习笔记4--高精度地图关键技术(下)
The horizontally scrolling recycleview displays five and a half on one screen, lower than the average distribution of five
Unity particle special effects series - the poison spray preform is ready, and the unitypackage package is directly used - on
WorkManager學習一
How to write high-quality code?
AtCoder Beginner Contest 258「ABCDEFG」