当前位置:网站首页>伪类元素--before和after
伪类元素--before和after
2022-07-05 09:44:00 【追求~】
before/after
伪类相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。 效果使用:
像这种小图标大多使用before,after来实现,不仅简单还方便。
1.基本用法
:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下:
#example:before {
content: "#";
color: red;
}
#example:after {
content: "$";
color: red;
}
这两个伪类都属于内联元素,但是用display:block;属性可以将其转换成块状元素,比较常见的用法就是样式的一些实现,还有就是清除浮动的效果。。
2.样式修改
代码如下所示:
<div class="quote">
<span>打老虎</span>
</div>
.quote:before,.quote:after{//用这两个伪类实现样式渲染
content:"";
display:inline-block;
width:5%;
margin:5px 1%;
border-bottom:1px solid blue;
}
3.清除浮动
代码如下所示:
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="parent2">parent2</div>
//css代码
.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;
}
如果在上面代码中加上这段代码用来清除浮动则会达到不一样的效果:
.parent:after{
content:"";
display:block;//设为块状元素
clear:both; //用这个属性来清除浮动
}
::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容,尽量使用它们显示修饰性内容,例如图标。
注意:在使用before和after时content必不可少。
注意:在使用before和after时content必不可少。
注意:在使用before和after时content必不可少。
5.content属性
::before和::after必须配合content属性来使用,content用来定义插入的内容,content必须有值,至少是空。默认情况下,伪类元素的display是默认值inline,可以通过设置display:block来改变其显示。
content可取以下值。
1、string
使用引号包一段字符串,将会向元素内容中添加字符串。如: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>平凡的世界</p>
2、attr()
通过attr()调用当前元素的属性,比如将图片alt提示文字或者链接的href地址显示出来。
<style type="text/css">
a::after{
content: "(" attr(href) ")";
}
</style>
<a href="http://www.cnblogs.com/starof">starof</a>
3、url()/uri()
用于引用媒体文件。
举例:“百度”前面给出一张图片,后面给出href属性。
<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">百度</a>
</body>
4、counter()
调用计数器,可以不使用列表元素实现序号功能。
配合counter-increment和counter-reset属性使用:
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>
边栏推荐
- The essence of persuasion is to remove obstacles
- 【C语言】动态内存开辟的使用『malloc』
- Node red series (29): use slider and chart nodes to realize double broken line time series diagram
- Comparison of batch merge between Oracle and MySQL
- ArcGIS Pro creating features
- @JsonAdapter注解使用
- 单片机原理与接口技术(ESP8266/ESP32)机器人类草稿
- 《微信小程序-基础篇》小程序中的事件与冒泡
- 硬核,你见过机器人玩“密室逃脱”吗?(附代码)
- 苹果 5G 芯片研发失败?想要摆脱高通为时过早
猜你喜欢
Advanced opencv:bgr pixel intensity map
Unity particle special effects series - the poison spray preform is ready, and the unitypackage package can be used directly - next
Kotlin compose and native nesting
RMS to EAP is simply implemented through mqtt
MySQL字符类型学习笔记
能源势动:电力行业的碳中和该如何实现?
卷起來,突破35歲焦慮,動畫演示CPU記錄函數調用過程
Apache dolphin scheduler system architecture design
如何获取GC(垃圾回收器)的STW(暂停)时间?
.Net之延迟队列
随机推荐
The king of pirated Dall · e? 50000 images per day, crowded hugging face server, and openai ordered to change its name
Cut off 20% of Imagenet data volume, and the performance of the model will not decline! Meta Stanford et al. Proposed a new method, using knowledge distillation to slim down the data set
ArcGIS Pro 创建要素
让AI替企业做复杂决策真的靠谱吗?参与直播,斯坦福博士来分享他的选择|量子位·视点...
Windows uses commands to run kotlin
Flutter development: a way to solve the problem of blank space on the top of listview
Swift saves an array of class objects with userdefaults and nssecurecoding
Single chip microcomputer principle and Interface Technology (esp8266/esp32) machine human draft
Dedecms website building tutorial
Charm of code language
Generics, generic defects and application scenarios that 90% of people don't understand
Kotlin Compose 与原生 嵌套使用
RMS to EAP is simply implemented through mqtt
剪掉ImageNet 20%数据量,模型性能不下降!Meta斯坦福等提出新方法,用知识蒸馏给数据集瘦身...
StaticLayout的使用详解
Cerebral cortex: directed brain connection recognition widespread functional network abnormalities in Parkinson's disease
钉钉、企微、飞书学会赚钱了吗?
Tianlong Babu TLBB series - questions about skill cooling and the number of attack ranges
Are databases more popular as they get older?
硬核,你见过机器人玩“密室逃脱”吗?(附代码)