详解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支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
html Table 表头固定的实现
Jan 22 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
html5本地存储 localStorage操作使用详解
Sep 20 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 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
给多个地址发邮件的类
2006/10/09 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
python 进程池pool使用详解
2020/10/15 Python
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
英国综合网上购物商城:The Hut
2018/07/03 全球购物
机械专业应届生求职信
2013/12/12 职场文书
优秀本科生求职推荐信
2014/02/24 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
学校督导评估方案
2014/06/10 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
电力培训心得体会
2014/09/02 职场文书
Python道路车道线检测的实现
2021/06/27 Python
Python内置数据类型中的集合详解
2022/03/18 Python
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL