详解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 动画技术
Jul 27 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
css3 filter属性的使用简介
Mar 31 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实现paypal整合方法
2010/11/28 PHP
PHP开发注意事项总结
2015/02/04 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
强制设为首页代码
2006/06/19 Javascript
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
python自动化测试之setUp与tearDown实例
2014/09/28 Python
python字符串,数值计算
2016/10/05 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
上课看小说检讨书
2014/02/22 职场文书
拓展训练激励口号
2014/06/17 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL