`
piperzero
  • 浏览: 3555011 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

css中的after

 
阅读更多
:after 伪元素在元素之后添加内容。

这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。

所有主流浏览器都支持 :after 伪元素,但对于IE来说,只有IE8以上版本支持。

h1:after
  {
  content:url(beep.wav);
  }

此样式会在每个 h1 元素之后播放一段声音:

<style type="text/css">
h1:after {content:url(/i/w3school_logo_white.gif)}
</style>

<h1>This is a heading</h1>
分享到:
评论

相关推荐

    [CSS] 用伪元素:after实现分割线和气泡

    `:after`是CSS中的一个伪元素选择器,用于在元素内容之后插入内容。本话题将深入探讨如何利用`:after`伪元素来实现分割线和气泡效果。 首先,让我们理解`:after`的基本语法。`:after`伪元素紧跟在选择器后面,然后...

    CSS伪元素:after:before的特殊用法demo

    在这个特定的示例中,我们关注的是CSS中的两个重要概念:伪元素`:after`和`:before`。这两个伪元素允许我们在不添加额外HTML标记的情况下,向元素的内容中插入内容。 `:after`和`:before`伪元素在CSS3中被引入,...

    微信小程序 CSS 选择器::after和::before的简单使用

    前两天看文档看到选择器那块儿的时候,前面4个基本都能理解:.class,#id,element,element, element,但后面两个::after和::before(文档中说,分别表示在view 组件的后面和前面插入内容),表示有点没有理解。...

    纯CSS3伪类after实现自定义hover效果

    关键在于CSS的伪类after中的content,它可以直接指定当前样式标签里的内容 废话不多说,仔细看代码你就懂啦(什么?你一点CSS基础都没有,额,抱歉,这个我也难办了) 使用方法: 1、将head中的.tooltip样式...

    CSS中的before和:after伪元素使用详解

    在CSS中,`:before` 和 `:after` 伪元素是用于向元素的内容区添加内容的特殊工具。它们并不是真正的HTML元素,而是由CSS创建的虚拟元素,可以在元素的正常内容之前或之后插入额外的非文本内容,如图标、分隔符等。这...

    CSS中文样式表

    在CSS中,你可以定义文本的字体、颜色、大小、行高,设置元素的布局方式,包括边距、填充、宽度、高度,以及控制元素的对齐方式、背景颜色和图片等。此外,CSS还支持响应式设计,能够根据不同的设备屏幕尺寸和方向...

    搜索图标 search icon 使用css3的after特性进行search icon

    在这个主题中,我们将深入探讨如何使用CSS3的`::before`和`::after`伪元素来创建一个搜索图标。 首先,让我们理解一下`::before`和`::after`伪元素的概念。这两个伪元素允许我们在HTML元素的内容前面或后面插入内容...

    详细解读CSS中的伪类after

    CSS中的`:after`伪类是一种非常实用的特性,它允许我们在元素内容之后插入额外的非元素内容。这在处理布局、清除浮动、添加装饰性内容等方面尤其有用。本文将深入探讨`:after`伪类的工作原理、应用场景以及一些注意...

    CSS2.0+CSS3.0中文手册

    文件列表中的`CSS2.0.chm`很可能是CSS2.0的官方规范或详细教程,包含了所有CSS2.0属性、选择器和规则的详细介绍,是学习和查阅CSS2.0特性的宝贵资源。而`css3.0参考手册.chm`则可能涵盖了CSS3.0的最新发展,包括各个...

    CSS中文完全参考手册

    5. **选择器扩展**:CSS3.0添加了更多的选择器,如伪类(`:hover`, `:active`, `:focus`)和伪元素(`::before`, `::after`),以及基于属性的选择器(`[attr=value]`)等,增强了对元素状态和内容操作的能力。...

    CSS2.0中文手册DHTMLET-Cascading Style Sheet 2.0 中文手册

    在CSS2.0中,选择器不仅限于标签选择器,还包括类选择器、ID选择器、伪类和伪元素等。类选择器以`.`开头,ID选择器以`#`开头,伪类如`:hover`用于表示鼠标悬停状态,伪元素如`::before`和`::after`用于在元素内容...

    css 中文手册api

    - 选择器:选择器是CSS中用于指定要应用样式规则的元素的关键部分。例如,`p`选择器用于选择所有的段落元素。 - 属性:属性定义了元素的特定样式,如`color`定义文本颜色,`font-size`定义字体大小。 - 值:每个...

    上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合

    3. **布局技术**:在CSS中,有流体布局、网格布局、Flexbox(弹性盒模型)和Grid(网格布局系统)等多种布局方式。这些技术有助于创建响应式设计,使网页适应不同设备屏幕。 4. **颜色和字体**:CSS允许设置文字...

    css2.0和css3.0的中文参考手册

    9. **伪元素和伪类**:CSS3.0扩展了伪元素和伪类,如`::before`, `::after`, `:nth-child(n)`等,增强了元素的装饰和交互功能。 通过学习这两个版本的CSS,开发者能够创建更丰富、更动态、更具响应性的网页设计,...

    CSS样式初始化commonInitialize.css

    在网页设计中,CSS(Cascading Style Sheets)样式被广泛用于定义页面元素的外观、布局和结构。CSS样式初始化是开发过程中一个重要的步骤,它旨在消除浏览器之间的默认样式差异,确保网页在不同浏览器上的一致性表现...

    css实战手册源代码

    这个源代码压缩包包含了书中提到的各种示例,帮助读者更好地理解和应用CSS技术。下面我们将详细探讨其中涉及的一些关键知识点。 1. **CSS选择器**:CSS选择器是CSS中的基本概念,用于选取HTML或XML文档中的元素。在...

    css中hr标签的各种用法

    然而,通过CSS,我们可以进一步定制`&lt;hr&gt;`标签的外观,使其在设计中发挥更多作用。本文将详细介绍`&lt;hr&gt;`标签的各种CSS用法。 1. **基本使用** `&lt;hr&gt;`标签默认会生成一条横跨页面的单线条。例如: ```html ``` ...

    CSS2 中文CHM

    1. **选择器增强**:CSS2引入了更复杂的选择器,如类选择器(`.class`)、ID选择器(`#id`)、属性选择器(`[attr]`)以及伪类(`:hover`, `:active`, `:focus`)和伪元素(`::before`, `::after`),这些选择器让...

    CSS3.0 API中文文档

    1. **选择器增强**:CSS3引入了更多精确的选择器,如属性选择器、伪类和伪元素,例如`[attr=value]`用于选取具有特定属性值的元素,`:nth-child(n)`用于选取特定位置的子元素,以及`::before`和`::after`用于在元素...

    CSS+样式表中文手册

    CSS的不同版本(如CSS2、CSS3)和新的特性可能在不同浏览器中有不同的支持程度,开发者需关注浏览器兼容性表,如Can I Use,以确保广泛兼容。 **七、资源与工具** - CSS样式表中文手册.chm:这是手册的主要内容,...

Global site tag (gtag.js) - Google Analytics