`
desert3
  • 浏览: 2160508 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

css属性 :after :before content css伪元素

    博客分类:
  • Html
 
阅读更多
:after:伪元素在元素之后添加内容。
这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。

例子:http://www.w3school.com.cn/tiy/t.asp?f=csse_after
/* 此样式会在每个 h1 元素之后播放一段声音: */
h1:after
  {
  content:url(beep.wav);
  }


参考:
w3school CSS :after 伪元素
MDN :after | ::after

CSS伪元素(Pseudo-elements):用于向某些选择器设置特殊效果。

语法:
selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}

  • :first-letter 向文本的第一个字母添加特殊样式。 CSS1
  • :first-line 向文本的首行添加特殊样式。 CSS1
  • :before 在元素之前添加内容。 CSS2
  • :after 在元素之后添加内容。 CSS2


content 属性:与 :befor 及 :after 伪元素配合使用,来插入生成内容。
该属性用于定义元素之前或之后放置的生成内容。默认地,这往往是行内内容,不过该内容创建的框类型可以用属性 display 控制。
分享到:
评论

相关推荐

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

    综上所述,CSS伪元素`:after`和`:before`是强大的工具,能够帮助开发者在不破坏HTML结构的前提下,实现各种创意和功能。通过熟练掌握和灵活运用这些伪元素,我们可以创建出更加丰富、互动性和用户体验良好的网页。在...

    打造节日气氛:使用CSS `:before` 和 `:after` 伪元素装饰圣诞树

    通过使用CSS的:before和:after伪元素,我们可以为圣诞树添加各种装饰,从而提升用户体验并增加节日气氛。这些伪元素提供了一种灵活的方式来添加装饰性的内容,而不需要修改HTML结构。通过添加彩灯、礼物和其他装饰,...

    CSS伪元素 CSS:before CSS伪元素(Pseudo Element):after与:before

    CSS伪元素:before和after伪元素的使用和应用 CSS中的伪元素(Pseudo Element)是一种特殊的HTML元素,用于在文档树中添加虚拟元素,以便实现特定的样式或布局效果。在CSS中,有两种常用的伪元素::before和:after...

    那些你所不知的CSS ::before 和::after 伪元素用法

    - **清除浮动**:避免使用额外的`<div>`元素来清除浮动,可以利用`::after`伪元素: ```css .clear-fix { *overflow: hidden; *zoom: 1; } .clear-fix::after { display: table; content: ""; width: 0; ...

    CSS :befor :after 伪元素的巧妙用法

    本篇重点介绍CSS中的:befor、:after创建的伪元素几种使用场景,如填充文本、作为iconfont、进度线、时间线以及几何图形。 1. 介绍 1.1 说明 CSS中的:befor、:after都会创建一个伪元素,其中:befor创建的伪元素是所选...

    CSS中:before和:after伪元素使用的奇技淫巧

    CSS伪元素的使用非常灵活,对于网页设计师来说,掌握这些技巧能够让页面更加生动有趣,而不必依赖于复杂的JavaScript代码。无论是为了增加视觉效果、提供动态反馈,还是为了解决某些布局问题,:before和:after伪元素...

    CSS3 伪元素选择器,例如(E::before、E::after)

    常见伪元素: E::first-letter, 表示给元素中的第一个字母设置一个样式 E::first-line, 表示给元素的第一行设置一个样式 E::before, 用于CSS渲染中向元素逻辑上的头部添加内容,主要是用它开显示修饰的内容,...

    HTML5&CSS3网页制作:伪元素选择器.pptx

    CSS3 中的 `:before` 和 `:after` 伪元素选择器提供了这样的功能。 1. `:before` 选择器: `:before` 伪元素选择器允许我们在元素的内容前面插入内容。例如,如果我们想在一个段落前添加一个引号,可以这样编写CSS...

    CSS3中伪元素::before和::after的用法示例

    众所周知::before与::after两个伪元素其实是CSS3中的内容,然而实际上在CSS2中就已经有了这两者的身影,只不过CSS2中是前面加一个冒号来表示(:before和:after)。今天主要讲讲这两个伪元素该如何使用。 一、与普通...

    纯css3before和after伪元素结合animation鼠标悬停动画效果

    在本文中,我们将深入探讨如何使用CSS3的`::before`和`::after`伪元素,结合`@keyframes`动画来实现一个鼠标悬停时的动态效果。这两个伪元素在网页设计中扮演着重要的角色,可以让我们在不增加额外HTML标记的情况下...

    2014-10-10-CSS伪元素before和after的应用1

    【CSS伪元素::before和::after的应用】 在CSS中,伪元素和伪类是两种不同的概念,它们在页面样式设计中扮演着重要角色。伪类是用于定义元素在特定状态下的样式,比如`:hover`表示鼠标悬停时的状态,`:focus`表示...

    CSS伪类:before在元素之前 :after 在元素之后实例讲解

    本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下。 :before 伪元素在元素之前添加内容 这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地,这个伪元素是行内元素...

    CSS伪元素 :before, :after, box-shadow应用

    首先,CSS伪元素`:before`和`:after`允许我们在元素内容的前面或后面添加内容,而无需修改HTML文档的结构。这些伪元素默认是透明的,我们需要通过`content`属性来定义它们显示的内容。例如,在一个引用段落(`<p>`)...

    深入理解::before/:before和::after/:after的使用

    这两个伪元素在CSS2中被引入,而在CSS3中,为了更好地与伪类区分开,它们的语法被更新为`::before` 和 `::after`。 1. **基本概念** - **伪元素与伪类的区别**:伪元素如`:before` 和 `:after` 是用来创建虚拟内容...

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

    在实际使用中,`:before` 和 `:after` 伪元素经常与CSS的其他属性结合使用,比如`content`、`display`、`position`、`background-image`等,来实现如浮动提示、分隔线、装饰性图标等多种效果。例如,它们可以用于在...

    CSS伪元素before、after设置特殊效果:制作时尚焦点图相框

    在网页设计中,CSS伪元素before和after非常强大且实用,它们允许我们在选定元素的内容之前或之后插入内容。这使得我们可以通过CSS来创建一些额外的视觉效果,而无需使用额外的HTML标记或图片。通过这种方式,设计师...

Global site tag (gtag.js) - Google Analytics