微学网

热门关键词:   as  thinkphp  ecshop  xxx  商务通  www.ymwears.cn
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

伪元素::after和::before

发布时间:2021-03-26 来源:未知 点击:
分享:
 
 

::after是一个CSS伪元素,使用::after,你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西)。虽然最终生成的东西并不是真正的DOM里的内容,但这些内容能像普通内容一样显示,基本的效果是这样的:

CSS代码

div::after {
  content: "你好";
}

HTML代码

<div>
  <!-- div里的其它内容 -->
  你好
</div>

::before跟::after完全类似,只是它插入的内容会出现在其它内容之前。这两者的区别可以简单描述为:

  • 想让插入的内容出现在其它内容前,使用::before,否者,使用::after。
  • 在代码顺序上,::after生成的内容也比::before生成的内容靠后。如果按堆栈视角,::after生成的内容会在::before生成的内容之上。

content的值可以为:

  • 字符串: content: "字符串"; – 特殊字符串需要转义或unicode编码。
  • 图片:content: url(/path/to/image.jpg); – 图片会按原尺寸大小的插入,不能改变,因为渐变色实际上也是图像,所以,这些伪元素里也可以使用渐变色。
  • 空: content: ""; – 可以用于清除左右浮动元素,也能够用于使用背景图片(这是可以设置高和宽,甚至使用background-size。)
  • 计数器: content: counter(li); – 在列表时计算行数非常方便。

需要注意的是,你不能用它们插入HTML(至少这些HTML代码会被转义输出)。content: "<h1>nope</h1>";

双冒号(::)和单冒号(:)的区别

所有支持CSS3的双冒号(::)语法的浏览器都会支持单冒号(:)语法,但IE8只支持单冒号。建议只使用单冒号,以获得最佳的浏览器支持。

双冒号(::)是一种新语法,是用来将伪元素选择器和伪元素区别开。如果不需要IE8支持,就用双冒号(::)吧。

浏览器支持情况

都是一些小问题:

  • Firefox 3.5- 不支持伪元素的绝对定位。
  • Opera 9.2里,伪元素里的空格会显示,如同在pre里一样。
  • IE 8 不支持伪元素里的z-index


这就是微学网-程序员之家为你提供的"伪元素::after和::before"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/14086.html

上一篇:CSS的:Before和:After伪元素用法

下一篇:没有了

网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2021 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

菜鸟教程,提供各类程序编程入门,技巧