::before ::after伪元素下特有content属性和用法
css3为了区分伪类和伪元素，伪元素采用双冒号写法。
常见伪类 :hover,:link,:active,:target,:not(),:focus。
常见伪元素 ::first-letter,::first-line,::before,::after,::selection。
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。
比如：有些网站的联系电话，希望在它们前加一个icon，就可以使用:before伪元素，如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .ui::before { content:'\260E'; font-size: 15px; } </style> </head> <body> <div class="uu"> <p class="ui">13977011111</p> </div> </body> </html> 
注意：这些特殊字符的html，js和css的写法是不同的，具体可查看html特殊字符的html，js，css写法汇总。
二、content属性
::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。默认情况下，伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。
content可取以下值。
1、string
使用引号包一段字符串，将会向元素内容中添加字符串。如：a:after{content:""}
比如：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p::before{ content: "《"; color: blue; } p::after{ content: "》"; color: blue; } </style> </head> <body> <div class="uu"> <p class="ui">content属性和用法</p> </div> </body> </html> 
2、attr()
通过attr()调用当前元素的属性，比如将图片alt提示文字或者链接的href地址显示出来。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> a::after{ content: "(" attr(href) ")"; } </style> </head> <body> <div class="uu"> <a href="https://www.qiquanji.com/">期权记</a> </div> </body> </html> 
3、url()/uri()
用于引用媒体文件。
例如：“期权记”前面给出一张图片，后面给出href属性。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> a::before{ content: url("https://www.qiquanji.com/data/img/dmj/201903021551541417148425.jpg"); } a::after{ content:"("attr(href)")"; } a{ text-decoration: none; } </style> </head> <body> <div class="uu"> <a href="https://www.qiquanji.com/">期权记</a> </div> </body> </html> 
调用计数器，可以不使用列表元素实现序号功能。
配合counter-increment和counter-reset属性使用：
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ counter-reset: section; } h1{ counter-reset: subsection; } h1:before{ counter-increment:section; content:counter(section) "、"; } h2:before{ counter-increment:subsection; content: counter(section) "." counter(subsection) "、"; } </style> </head> <body> <h1>Html/Css</h1> <h2>........</h2> <h2>........</h2> <h2>........</h2> <h1>JavaScript</h1> <h2>........</h2> <h2>........</h2> <h1>jQuery</h1> <h2>........</h2> <h2>........</h2> </body> </html> 
三、使用
1、清除浮动
清除浮动方法有多种，现在最常用的就是下面这种方法，仅需要以下样式即可在元素尾部自动清除浮动
.cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } 2、模拟float:center的效果
float没有center这个取值，但是可以通过伪类来模拟实现。
这个效果实现很有意思，左右通过::before float各自留出一半图片的位置，再把图片绝对定位上去。
核心css如下：
#page-wrap { width: 60%; margin: 40px auto; position: relative; } #logo { position: absolute; top: 0; left: 50%; margin-left: -125px; } #l, #r { width: 49%; } #l { float: left; } #r { float: right; } #l:before, #r:before { content: ""; width: 125px; height: 250px; } #l:before { float: right; } #r:before { float: left; } 完整代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } body { font: 14px/1.8 Georgia, serif; } #page-wrap { width: 60%; margin: 40px auto; position: relative; } #logo { position: absolute; top: 0; left: 50%; margin-left: -125px; } #l, #r { width: 49%; } #l { float: left; } #r { float: right; } #l:before, #r:before { content: ""; width: 125px; height: 250px; } #l:before { float: right; } #r:before { float: left; } </style> </head> <body> <div id="page-wrap"> <img src="https://www.qiquanji.com/data/img/dmj/201905221558499406355729.jpg" id="logo"> <div id="l"> <p> 随着业务需求的快速发展变化，需求不断增长，迫切需要一种更加快速高效的软件交付方式。微服务可以弥补单体应用不足，是一种更加快速高效软件架构风格。单体应用被分解成多个更小的服务，每个服务有自己的独立模块，单独部署，然后共同组成一个应用程序。把范围限定到单个独立业务模块功能。分布式部署在各台服务器上。本篇我们将介绍如何使用.NET Core打造自己的微服务架构。 Linux是一个多用户、多任务的操作系统，如果要使用系统资源，就必须向系统管理员申请一个用户，通过这个用户进入系统，通过建立不同属性的用户实现不同的作用或权限，可以合理利用和控制系统资源。 我们生成jQuery实例对象后，就可以使用原型上的css(), html()等方法，这就体现了原型继承：由构造函数生成的实例对象，可以继承构造函数的原型对象上的属性和方法。 最近重新开始学习js，在第一章的一个小节里写到了“脚本调用策略”，书上写的这部分不多，但是发现在我之前的（笔）面试中，问到的频率还是比较高的。自己一直习惯于直接把所有js文件写在head里，后来了解到优化后，会把js放在最底部，但并不太懂这样做的好处，而且其他的一些处理方式，自己也并未有过实际的操作。 对实时性要求比较高的场景，使用数据库的分区分表分库。 对实时性要求不高的场景，可以考虑使用索引库(es/solr)或者大数据hadoop平台来解决(如数据分析，挖掘，报表等)或者混合使用(如es+hbase/mongodb)。 当数据量特别大的时候，我们对生产端限流肯定是不科学的，因为有时候并发量就是特别大，有时候并发量又特别少，我们无法约束生产端，这是用户的行为。所以我们应该对消费端限流，用于保持消费端的稳定，当消息数量激增的时候很有可能造成资源耗尽，以及影响服务的性能，导致系统的卡顿甚至直接崩溃。 </p> </div> <div id="r"> <p> 在这本使用LDAP的Spring Security快速指南中，我们学习了如何使用LDIF配置基本系统并在spring security配置LDAP。 我们之前将敏捷方法与传统的瀑布流方法进行了比较。敏捷这种软件开发领域的项目管理办法，在过去数年有着强劲的发展势头。它解决了产品需求与开发等方面的不确定性。与之相较的瀑布流方法则试图将项目生命周期的各阶段，即启动、计划、执行和收尾等，按照严格的结构顺序进行组织。 你是在分岔口的操作员。当你听到列车来了，你没办法知道这两条路哪一条是正确的。然后呢，你让列车停下来，问列车员哪条路是对的，然后你才转换铁路方向。 之所以叫自制而不叫自研，因为真的没有多少可以称之为研究的东西，完全是拼凑而成。自制的这个driver本身没有多少技术含量，但是需要深入了解docker的运行原理和底层的存储方式，然后寻找一种恰当的方式来解决它。 这可以说是富文本技术实现的麻烦之处(难点)。玩过富文本技术的同学，肯定会想到“document.execCommand()”这个大名鼎鼎的对象。目前市面上的富文本基本都是基于这个对象打造。比如对选区执行一个加粗修饰，你可以直接调用“document.execCommand('bold')”。该API会将用户选择的文本都加上一个"strong"标签。 </p> </div> </div> </body> </html> 
3、做出各种图形效果
例如：一个六角星
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #dd { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; } #dd::after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: ""; top: 30px; left: -50px; } </style> </head> <body> <div id="dd"></div> </body> </html> #dd的div是一个正三角行，#dd::after是一个倒三角形，通过绝对定位，调整其位置即可实现六角星的效果。
原文链接：https://www.qiquanji.com/post/8692.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知