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对伪类和伪元素的定义： 伪类：用于向某些选择器添加特殊效果。 伪元素：向某些选择器设置特殊效果。 对于我这种理解能力比较差的人来说，恕我直言，这两句话貌似……这是一个概念吧？ 从这两个概念，我们...
开始切第一张图了，第一个遇到的问题是顶部导航栏这里，用斜线分割。想到的思路是用伪类:before或者:after实现 先写html结构。 Home About Features Blog Shop 2 再是样式 .link:before{content: "/";margin:0 24px;color: grey;}.link:first-child:before{display:none;} 先用：bofore，设定内容是"/"，前后margin，颜色。再用first-child将第一个...
1. 利用content属性，为元素添加内容修饰： 1） 添加字符串： 使用引号包括一段字符串，将会向元素内容中添加字符串。栗子： a:after { content: "after content"; } 2） 使用attr()方法，调用当前元素的属性的值： 栗子： a:after { content: attr(href); }a:after { content: attr(data-attr); } 3）使用url()方法，引用多媒体文件： 栗子： a::before { content: url(logo.png); } 4) 使用counte...
伪类分为两种：UI伪类 与 结构化伪类 UI伪类：a:link{} a:hover{} a:active{} a:visited{} input[type=text]:focus{} #title-one:target{} 结构化伪类: table tr:nth-child(even){} //even---下标为偶数的子元素 table tr:nth-child(odd){} //odd---下标为奇数的子元素 table tr:first-child{} ...
最近在研读 《CSS SECRET》（CSS揭秘）这本大作，对 CSS 有了更深层次的理解，折腾了下面这个项目： CSS3奇思妙想 -- Demo （请用 Chrome 浏览器打开，非常值得一看）。采用单标签完成各种图案，许多图案与本文有关。 也希望觉得不错的同学顺手在我的 Github 点个 star ： CSS3奇思妙想 。 正文从这里开始，本文主要讲述一下 伪元素 before 和 after 各种妙用。 :before和::before的区别 在介绍具体用法之前...
body{ font-family: cursive; font-size: 14px; } .left{ width:150px; height: 50px; background: #fff; position: relative; margin: 50px 0 0 50px; line-height: 50px; text-align: center; border: 2px solid green; border-...