伪元素:before 和 :after可以做的东西是相当惊人的。对于页面上的每一个元素，你拥有了两个更灵活的、而且可以完成其它HTML元素都能完成的东西的元素。它们让一大堆有趣的设计成为可能，而且不会对你的语义标签产生负面影响。这里有一大堆关于这些有趣的效果的示例，你想看的话就接着往下看吧。 多重背景画布 因为你可以将伪元素相对于它们的父类元素绝对定位，你可以想象成每个元素都有两个额外的层。Nicolas Gallaghe...
p:first-line { /*伪元素： 本来p元素的第一行是一句文字，并不是一个元素，但是这里将p元素的第一行伪装成一个元素了，然后给它设置样式; */ font-size:30px; font-family:Arial; color:red; } p:first-letter { /*这里将p标签这个元素的第一个字母伪装成一个元素，然后给他设置样式*/ font-size:3cm; } :root { /*将样式绑定到页面的根元素中，所有根...
上一篇：《RGBA与Opacity区别小解》 今天说一个简单的伪元素::selection，它的用武之地仅在于改变选中文本时文本的颜色和文本背景颜色。 网页默认选择文本后，文字颜色为白色，文字背景颜色为蓝色，要改变这种选择样式，可以使用::selection伪元素来分别设置文本颜色和文本背景颜色。 在线查看高清无码效果可以猛戳这里这里或直接点击下面的网址： http://codepen.io/myvin/pen/bdLXvK 给出例子，先来个段落： HTML Ma...
一、介绍 css3为了区分伪类和伪元素，伪元素采用双冒号写法。 常见伪类??:hover,:link,:active,:target,:not(),:focus。 常见伪元素??::first-letter,::first-line,::before,::after,::selection。 ::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。 这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。 所以不要用:before或:after展示有实际意义的内...
一：:before && :after的用法 :before 如同对伪元素的名称一样，:before 是用来给指定的元素的内容前面插入新的内容。举例说明： .before:before{content:you before; color:red;} me 在这里我们给伪元素 :before 添加了属性 content，并赋值为 you before。我们来看效果： //在指定元素的内容 me 前添加了新内容 you before 我们不难发现这里通过伪元素 :before 添加的新内容区域默认的 display 属性值...
CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，它们是以CSS选择器的形式出现的，具有标签的表现效果，但是呢又不是真正的标签元素，所以叫做“伪元素”。下面就说一下常见的两个伪元素before和after。 一、伪元素基本用法 在CSS选择器中加上相应伪类选择符就可以了，像这样：#example: before或者#example: after，这里是使用ID选择器，比如下面的CSS代码： #example:before { content: "\""...
CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after; 那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了::first-letter,::first-line,::before,::after另外他还增加了一个::selection。 在css3中，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。 ::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式，我们就可以使用这...
上一篇博客说的是伪类，这次我们来说说伪元素。先来补充一下上篇博客漏掉的一个伪类：:focus 伪类 (1)定义和用法 :focus伪类在元素获得焦点时向元素添加特殊的样式。注释IE浏览器不支持此属性。 (2)说明 这个伪类应用于有焦点的元素。 例如HTML中一个有文本输入焦点的输入框，其中出现了文本输入光标；也就是说，在用户开始键入时，文本会 输入到这个输入框。其他元素（如超链接）...
目录 [1]定义 [2]用法 first-letter first-line before after selection [3]重点 [4]DEMO 首字下沉 钉子效果 图片叠加效果 定义 伪元素顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，当然伪元素还包括:first-line,:first-letter和::selection ...
css-伪类和伪元素 无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。 一：伪类种类 css伪类用于向某些选择器添加特殊的效果 二：伪元素种类 css伪元素用于将特殊的效果添加到某些选择器 三：伪类和伪元素的区别 伪类和伪元素本身就有一个根本的不同之处，这点直接体...
前阵子对公司框架的前端优化中，使用了字体图标（iconfont）来做模块的图标集，供用户进行配置选择。 字体图标的有非常好的灵活性和复用性，可以像处理文字一样通过font-size进行大小设置、通过color来直接配色，如果系统整体设计是比较扁平化的，浏览器兼容要求IE8+，并且在系统中需要一套图标集的话，选择字体图标来替代传统的png图标应该说是一个非常有性价比的方案。 具体字体图标的制作和使用，有一个非常棒的服务站点：...
CSS中的类（class）是为了方便过滤（即选择）元素，以给这类元素添加样式，class是定义在HTML文档树中的。 但是这在一些情况下是不够用的，比如用户的交互动作（悬停、激活等）会导致元素状态发生变化，class对这些动态变化无能为力。 为此，CSS引入了伪类（pseudo-class）的概念用来支持根据文档树以外的信息来过滤元素的能力。 伪类是一个抽象类，本质上还是一个类，因此其主要作用仍然是用来选择元素而后设定具体的样式...
伪元素 ::before，::after 1. 某些元素不支持 ::before，::after IE 不支持的元素有：img，input，select，textarea。 FireFox 不支持的元素有：input，select，textarea。 Chrome 不支持的元素有：input[type=text]，textarea。 2. 必须设置 content 属性 若不设置，则伪元素不会显示。如果不想设置 content 的内容，可以将内容设置为空。如： .a:before { content: ; display: block; width:...
CSS 伪元素 (Pseudo-elements)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (padding) 实例 CSS 列表实例 CSS 表格实例 轮廓（Outline)实例 CSS 尺寸 (Dimension) 实例 CSS 分类 (Classification) 实例 CSS 定位 (Positioning) 实例 CSS 伪类 (Pseudo-classes)实例 CSS 伪元素 (Pseudo-elements)实例 ...
前段时间在写网页的时候，使用了CSS的伪元素:after来实现样式，故而重温了一下伪类和伪元素。平时实现的时候便是拿出来用，但是真正区分两者的概念的时候却有点混淆了。 首先，查看一下W3S对伪类和伪元素的定义： 伪类：用于向某些选择器添加特殊效果。 伪元素：向某些选择器设置特殊效果。 对于我这种理解能力比较差的人来说，恕我直言，这两句话貌似……这是一个概念吧？ 从这两个概念，我们...