详解css3中的伪类before和after常见用法


Posted in HTML / CSS onNovember 17, 2020

before/after伪类相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪类应用相当的普及以及兴盛,不过貌似我们这边前端er们普遍缺乏使用这两个伪类的意识,要使用顶多也就是跟风的“清除浮动”应用。

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;
}

实现效果如下图所示:

详解css3中的伪类before和after常见用法

3.清除浮动

代码如下所示:

<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
<div class="parent2">parent2</div>
//css代码
.box1{
     width:300px;
     height:200px;
     background-color: lightgray;
     float:left;
}
.box2{
     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;
}

因为浮动的问题,实现效果如下所示:

详解css3中的伪类before和after常见用法

如果在上面代码中加上这段代码用来清除浮动则会达到不一样的效果:

.parent:after{
     content:"";
     display:block;//设为块状元素
     clear:both;   //用这个属性来清除浮动
}

达到的效果如下图所示:

详解css3中的伪类before和after常见用法

到此这篇关于详解css3中的伪类before和after常见用法的文章就介绍到这了,更多相关css3伪类before和after内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 #HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 #HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 #HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 #HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 #HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 #HTML / CSS
CSS3 文字动画效果
Nov 12 #HTML / CSS
You might like
默默小谈PHP&amp;MYSQL分页原理及实现
2007/01/02 PHP
PHP编码转换
2012/11/05 PHP
PHP中的use关键字概述
2014/07/23 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
php7性能提升的原因详解
2019/10/13 PHP
深入理解javascript中return的作用
2013/12/30 Javascript
Javascript Objects详解
2014/09/04 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
js事件委托和事件代理案例分享
2017/07/25 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Python 抓取动态网页内容方案详解
2014/12/25 Python
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Django框架多表查询实例分析
2018/07/04 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
实习期自我鉴定
2013/10/11 职场文书
会计实习生自我鉴定
2013/12/12 职场文书
编辑找工作求职信分享
2014/01/03 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
会计求职信范文
2014/05/24 职场文书
迎国庆演讲稿
2014/09/05 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
实用求职信模板范文
2019/05/13 职场文书