三沣开发知识 购物 网址 小说 美女秀 游戏 电影下载 图说天下 生肖星座 新闻 笑话 | IT开发 软件下载 手机论坛 三沣软件 360图书馆
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Html-Css -> 伪元素::before与::after的用法 -> 正文阅读
 

[Html-Css]伪元素::before与::after的用法

伪元素::before与::after的用法 ::before与::after两个伪元素其实是CSS3中的内容,然而实际上在CSS2中就已经有了这两者的身影,只不过CSS2中是前面加一个冒号来表示(:before和:after)。今天主要讲讲这两个伪元素该如何使用。
一、与普通元素一样可以给其添加样式
比如说我想在文字前面添加一个图标,如果我用普通元素写的话我可以这样写:

/*CSS*/
.del{ font-size: 20px;}
.del i{ display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; 
        background: url("imgs/delete.png") no-repeat center; background-size: 100%;}
.del span{ vertical-align: middle;}


/*HTML*/
<div class="del"><i></i><span>删除</span></div>

但是放个空的 i 标签总感觉很不爽,直接把它去掉吧!

/*CSS*/
.del{ font-size: 20px;}
.del::before{ content: ""; display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; 
        background: url("imgs/delete.png") no-repeat center; background-size: 100%;}
.del span{ vertical-align: middle;}


/*HTML*/
<div class="del"><span>删除</span></div>

这里就直接用::before伪元素代替了空的 i 标签,两者效果相同:

同样利用这一点,我们可以使用::after伪元素解决经典清除浮动的问题:

.clearfix::after{ display:block; clear:both; content:""; overflow:hidden; height:0; }

当然,如果你网站还需要兼容IE8,那还是用:after吧,::after不兼容。
二、在元素中插入文本
有时候我可能需要在许多元素中同时加入相同的文字,那么可以考虑用这两个伪元素。例如:

/*CSS*/
.up:after{ content: '↑'; color: #f00;}
.down:after{ content: '↓'; color: #0f0;}


/*HTML*/
<p class="up">上升</p>
<p class="down">下降</p>

实现效果如下:

三、在元素中插入图像
实现类似本文第一个例子中的图片加文字效果,也可以使用伪元素直接插入图片而不需要使用背景图,就像这样:

/*CSS*/
.del{ font-size: 20px;}
.del::before{ content: url("imgs/delete.png"); display: inline-block; margin-right: 2px; vertical-align: middle; }
.del span{ vertical-align: middle;}

但是需要非常注意的是,使用这种方式插入的图片并不能通过控制伪元素的大小来改变图片的大小,只能引入固定大小的图片(这个略坑啊...),所以个人觉得最好还是老老实实用背景图片比较好。
四、插入连续项目编号
可能你会说,加入连续项目编号还不简单吗?直接用有序列表ol不就行了嘛!
是,确实是可以实现,就像这样:

<p>我的爱好:</p>
<ol>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ol>

这是Chrome下的效果:

看起来挺好,没啥问题,那我若想给前面的序号加粗呢?一脸懵逼了...
这时候你说,那我直接在每条文字前手动加标签和数字,然后给标签加上样式不就行了么?

/*CSS*/
ul li{ list-style: none;}
ul li span{ font-weight: bold;}


/*HTML*/
<p>我的爱好:</p>
<ul>
    <li><span>1.</span>吃饭</li>
    <li><span>2.</span>睡觉</li>
    <li><span>3.</span>打豆豆</li>
</ul>

没错,现在是三条,要是是三十条,三百条,怎么办?一条条加?(很傻很天真...)
这时候若用纯CSS的方式,还得用到伪元素:

/*CSS*/
ul li{ list-style: none; counter-increment: number;}   //number相当于是个变量,随便取名就好,在伪元素中调用
ul li::before{ content: counter(number)"."; font-weight: bold;}  //注意这里不同于JS,counter(number)与"."之间不需要加任何东西,直接连接就好


/*HTML*/
<p>我的爱好:</p>
<ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ul>

效果如下:

那我如果不想要阿拉伯数字,我就想用中文数字可以么?
可以!伪元素很好很强大!

ul li{ list-style: none; counter-increment: number;}  
ul li::before{ content: counter(number,cjk-ideographic)"、"; font-weight: bold;}

效果如下:

除了这个cjk-ideographic,你还可以使用更多CSS中 list-style-type 属性:(直接贴上w3cshool里面的表格)

学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群
343599877,我们一起学前端!
  Html-Css 最新文章
Bootstrap表格
line
Vuex2.0边学边记+两个小例子
微信场景制作教程
2017年前端框架、类库、工具大比拼
react与vue
今日例子border
自适应网页设计(ResponsiveWebDesign)
CSS兼容各浏览器的hack
我的第一个HTML的程序
上一篇文章           查看所有文章
加:2017-06-19 01:44:08  更:2017-06-19 01:44:10 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图 中国文化英文 多播视频
2017-6-24 23:32:10
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库