详解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 相关文章推荐
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
详解HTML5中download属性的应用
Aug 06 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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 mysql数据库操作类
2008/06/04 PHP
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
php 启动报错如何解决
2014/01/17 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
js数组操作学习总结
2013/11/04 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现远程调用MetaSploit的方法
2014/08/22 Python
python字典序问题实例
2014/09/26 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
对python 调用类属性的方法详解
2019/07/02 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
几个常见的消息中间件(MOM)
2014/01/08 面试题
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
求职自我评价怎么写
2015/03/09 职场文书
自我推荐信怎么写
2015/03/24 职场文书
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android