::before和::after伪元素的用法

  • 伪类元素的display默认值是inline。
  • ::before和::after必须配合content属性来使用,content用来定义插入的内容,content必须有值,至少是空。

content可以有如下种类的值 :

  1. string 向元素内容中添加字符串,也可以添加特殊字符
    特殊字符的html,js,css写法汇总 ,其中伪元素的content应使用css写法,而直接写在html中时采用html写法
  2. attr() 调用当前元素的属性,如下,结果为 : (百度)
  a::after{
      content:"("attr(title)")";
  }

  <a title="百度"></a>
  1. url()/uri() 展示一张图片,语法同background-image
  2. counter() 调用计数器,配合counter-incrementcounter-reset使用:
<style>
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>

<body>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
</body>


了解更多可参考:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • css3为了区分伪类和伪元素,伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:tar...
    技术强阅读 422评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,567评论 1 45
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,848评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,337评论 19 139
  • 创想编辑部-张亚阁[公号原文链接] 我的沉睡还没长出犄角, 你叠的星星却依旧饱满。 我梦到了所有人: 父亲是长在山...
    创想编辑部阅读 616评论 0 1

友情链接更多精彩内容