`
ningzhisheng
  • 浏览: 12254 次
  • 性别: Icon_minigender_1
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS教程16 CSS的伪元素Pseudo Elements

阅读更多
伪元素吸附在选择上和pseudo classes伪类很像,像这样selector:pseudoelement{property: value;}。有四种方式。

First letters and First lines 首字母和首行

  first-letter伪元素作用到元素的第一个字母,first-line作用到元素的顶行。你可以,例如为段落创建一个drop caps和首行加粗。

Example Source Code [www.52css.com]
p:first-letter {
    font-size: 3em;
    float: left;
}

p:first-line {
    font-weight: bold;
}
Before and after 前后

  before和after用来联系content属性不使用HTML确定一个元素的内容位置。
  content属性值可以是:open-quote,close-quote,no-open-quote,no-close-quote,在引号标记里关闭任何字符串或使用url(imagename)图片。

Example Source Code [www.52css.com]
blockquote:before {
    content: open-quote;
}
blockquote:after {
    content: close-quote;
}
li:before {
    content: "POW: "
}
p:before {
    content: url(images/jam.jpg)
}
  听起来不错吧,可惜大部分用户不能体会到before或after的效果,因为IE不支持。
分享到:
评论

相关推荐

    tailwindcss-pseudo-elements:TailwindCSS插件,添加伪元素的变体

    TailwindCSS插件,添加伪元素的变体( ::before , ::after , ::first-letter等)。 用法 安装 NPM npm install tailwindcss-pseudo-elements --save-dev 纱 yarn add tailwindcss-pseudo-elements -D 配置 const...

    css3 transform属性利用伪元素制作字母卡片开关门

    3. **伪元素(Pseudo-elements)** - CSS3的伪元素如`:before`和`:after`,可以让我们在HTML元素前后添加内容,而无需修改HTML结构。在这里,它们可能被用来创建字母的额外部分,配合`transform`实现3D效果。 - ...

    前端开源库-pseudo-elements

    标题“前端开源库-pseudo-elements”指向的是一个专门收集和整理CSS伪元素相关资源的开源项目,可能包含了一个详尽的伪元素列表,以及如何在实际项目中使用它们的示例和最佳实践。 描述中的“所有CSS伪元素的列表”...

    css3伪元素和data属性创建漂亮的图片caption标题动

    本教程将深入探讨如何利用CSS3的伪元素(Pseudo-elements)和data属性来制作一个有趣的图片caption标题动画效果。这个效果在鼠标悬停图片时,标题会神奇地出现,极大地增强了用户的视觉体验。 首先,让我们了解CSS3...

    css+div布局和css教程和css的api

    虽然CSS本身并不像JavaScript那样提供完整的编程接口,但CSS Level 2.0引入了一些高级特性,如条件注释(@media)、伪类(:hover、:active、:focus)和伪元素(::before、::after)。这些功能使得CSS在特定条件下...

    css20_css_

    CSS 2.0样式表中文手册手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 ...

    CSS2.0_CSS教程_

    手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...

    Pseudo

    **CSS伪元素(Pseudo-elements)**: 伪元素与伪类相似,但它们不是状态,而是用于代表元素的一部分,比如`::before`和`::after`可以分别在元素内容之前或之后插入内容,而`::first-letter`和`::first-line`则分别...

    JavaScript获取伪元素(Pseudo-Element)属性的方法技巧

    CSS伪元素(Pseudo-Elements)是一种特殊的样式规则,用于定义文档中没有实际DOM节点的元素部分,例如`::before`和`::after`。这些伪元素在页面渲染时被插入到元素内部,但并不在DOM树中可见。在某些场景下,我们...

    前端开源库-pseudo-elements.zip

    这个压缩包“前端开源库-pseudo-elements.zip”可能包含了一些关于`pseudo-elements`的示例、教程或工具,旨在帮助开发者更深入地理解和运用这个技术。 `pseudo-elements`主要有以下几种: 1. `::before`: 这个伪...

    css详细教程.chm

     手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...

    位类和伪元素和选择器

    接下来是伪元素(Pseudo-elements),这是CSS中一种特殊的元素表示,用于操作HTML元素的内容或结构,但不会在DOM树中实际存在。常见的伪元素有`::before`和`::after`,它们可以插入内容到元素内容之前或之后。例如,...

    CSS2.0和CSS3.0 最新中文版参考手册(完整版)

     手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...

    浅谈CSS伪类与伪元素

    接下来,我们来分析伪元素(Pseudo-elements)。伪元素则用于创建一些不在文档树中的元素,并为其提供样式。它们允许开发者对元素的特定部分进行样式化,比如第一个字、第一行等。它们是基于元素的抽象,实际上并不...

    电脑css学习教程电脑css学习教程

    为了更好地学习CSS,你需要不断地练习和尝试,创建自己的项目,不断探索新的CSS特性,如动画(Animations)、过渡(Transitions)、伪类(Pseudo-classes)和伪元素(Pseudo-elements)等。同时,关注W3C标准的更新...

    CSS伪类和伪元素的区别详解

    而伪元素(Pseudo-elements)则是为元素创建视觉上的附加部分,它们并不是真正的HTML元素,但可以用来模拟新的内容。例如,`:first-letter`可以用于设置文本首字母的样式,`:before`和`:after`则可以在元素前后插入...

    css 中文教程,css 中文教程

    - **伪元素(Pseudo-elements)**: 如`::before`和`::after`,用于在元素前后插入内容。 - **选择器组合(Combinators)**: 如`>`(子选择器)、`+`(相邻兄弟选择器)和`~`(一般兄弟选择器)。 - **属性选择器...

    CSS中的伪元素简介

    下面将详细解释几种常见的CSS伪元素。 1. `::first-letter` 伪元素: 这个伪元素用于选取元素内的第一个字母,并允许我们对其应用特定的样式。例如,如果你想让每个段落的首字母放大,可以使用如下的CSS规则: ``...

    给before和after伪元素设置js效果的方法.docx

    在CSS中,伪元素(Pseudo-elements)是一种特殊的元素,它允许我们添加额外的元素而不扰乱文档本身。在某些情况下,我们需要给before和after伪元素设置js效果,以实现某些特定的样式效果。下面将介绍五种不同的方法...

Global site tag (gtag.js) - Google Analytics