`
Virgo_S
  • 浏览: 1151032 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

15、CSS的伪元素Pseudo Elements

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

First letters and First lines 首字母和首行

  first-letter伪元素作用到元素的第一个字母,first-line作用到元素的顶行。你可以,例如为段落创建一个drop caps和首行加粗。
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)图片。
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...

    前端开源库-pseudo-elements

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

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

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

    jQuery修改CSS伪元素属性的方法

    CSS伪元素(pseudo elements)不是DOM元素,因此你无法直接选择到它们。 假设有如下HTML代码: <div class=techbrood id=td_pseudo>techbrood introduction 和CSS代码: .techbrood:before { width: 0; } 现在你想...

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

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

    Pseudo

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

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

    CSS伪元素(pseudo-elements)非常的有用——你可以用它制作出CSS三角形,用在提示框上面,还可以用它完成很多简单的任务,而不需要多余的HTML元素。以前,伪元素的CSS属性是无法用JavaScript获取的,但现在,有了一个...

    css-pseudo-elements:包含用于使用伪元素语法在渲染树中创建更多框的原型库,从而扩展了可能的功能

    CSS伪元素弃用通知该项目不再维护,并已存档。 如果您想恢复项目,请随意进行。概述包含用于使用伪元素语法在渲染树中创建更多框的原型库,从而扩展了CSS 2.1中:: before和:: after可能实现的功能

    前端开源库-pseudo-elements.zip

    8. `::scrollbar`, `::scrollbar-thumb`, `::scrollbar-track`, `::scrollbar-button`, `::scrollbar-corner`, `::resizer`: 这些是CSS Scrollbars模块中的伪元素,用于自定义滚动条的各个部分的样式。 在实际应用...

    css20_css_

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

    浅谈CSS伪类与伪元素

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

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

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

    位类和伪元素和选择器

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

    Opdracht-Pseudo-elements

    【标题】"Opdracht-Pseudo-elements"是一个关于CSS伪元素的实践任务,它涉及到网页设计和前端开发中的一个重要概念。CSS伪元素是用于在HTML元素的特定部分添加额外样式的一种方式,它们并不实际存在于HTML文档中,...

    CSS中的伪元素简介

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

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

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

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

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

    CSS2.0_CSS教程_

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

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

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

Global site tag (gtag.js) - Google Analytics