这两个伪元素分别表示元素内容的【前】【后】，利用这两个伪元素可以在元素内容的前后添加内容，其实这没有什么前后的概念，如果应用了 absolute 的特性之后，你可以把这些伪元素放在任何位置，有了这两个伪元素，就代表每个元素都有两个助手可供使用，灵活运用它们的话将会得到很多有趣的实现，简化许多实现。

伪元素特性（目前已经遇到的）

• 它不存在于文档中，所以 js 无法操作它
• 它属于主元素本身，有些伪类仅仅是代表元素内容的一部分，譬如:first-letter 代表第一个字母；因此当伪元素被点击的时候触发的是主元素的 click 事件
• 块级元素才能有:before, :after，譬如 img 就不能设置，亦即某些元素是没有:before, :after 的，只要知道一般的块级元素都可以用就行了

注：css3 中，为了与伪类区分，伪元素前应该使用两个冒号，即:hover 伪类，::before 伪元素。当然为了向下兼容，用一个冒号也是可以的，不过建议尽量使用规范的写法。

各种图标

利用这两个伪类，可以实现需要简单的图标，例如搜索的放大镜，叉叉，箭头等等

上述图标的效果如下图：

扩大可点区域

在 mobile，特别是小屏手机，可点区域一般需要大一点，这样对用户友好一点。
当主元素实在没办法扩大自身的时候，可以利用:before, :after 来实现可点区域的扩大，还记得伪元素的特性之一，伪元素属于主元素，点伪元素就是点击主元素。

实现效果如下图：

这个算是个综合例子，应用了多种技巧。这是一个收藏按钮，两种状态：已收藏和未收藏，正好符合 checkbox，因此应用了 checkbox，修改了样式给了一个底图。然后下面的文字是:after，利用了动态 label 的技巧（详见 1.4），然后:before 应用了扩大可点区域技巧，使得 40*50 的区域内点击都有效。

实现 label

对于一些静态的文字，说明性的文字，譬如最常见的上图下字单元，完全可以用:after 实现那个文字。
还记得 form 家族的 label 标签吗？它的特性是 label 和 input 的联动，点击 label 元素就等同于点击 input，这个效果和伪元素的特性是一模一样的，用:before 完全可以替代 label。

唯有一点是 label 独有的，就是 label 元素和 input 元素的位置相距较远，这种联动是伪元素无法实现的，毕竟伪元素还是要围绕主元素存在的，远距离 absolute 将会引发灾难的。

实现效果如下图：

实现动态信息

如果你认为伪元素只能实现静态 label，那就把 CSS3 想得简单了。
:before, :after 的 content 属性的值除了是静态字符串之外，还有其他的一些特殊值，其中一个是 attr(…)，这个特性的作用是用主元素的某个属性的值作为 content 的值，当这个属性的值改变的时候，伪元素的值也会跟着改变，利用这个特性就可以实现动态信息了。

可以有两种动态方案：

1. 用 js 动态修改主元素的属性值，这个很直观
2. 修改伪元素 content 关联的属性

下面看一个例子：

实现的效果如下图：

这里用到第二种动态方案，日期列表里面，日期上面默认显示月份信息，但是选中态需要显示星期信息。
预先把每个单元用到的月份信息和星期信息放到主元素的 data 属性上面（缓存的思想），选中的时候一般都是要添加一个选中态样式，这时，除了基本的凸显性样式外，同时切换伪元素关联的 data 属性即可轻松地解决这个问题，而不用通过 js 去找到 label 元素，然后修改 text。

小结

伪元素帮助我们选择那些有特殊意义，但是却无法具体定位的 “东西”，它们对这些 “东西” 不做任何限制，它们只是代表这些特殊意义，譬如:first-letter，不限制首字母是哪一个字母，只是代表了首字母元素。

通过伪元素，可以让 CSS 更好的处理一些有特殊意义的元素，这些元素一般很难定位，甚至有些是代表状态的元素，譬如:target。

结合伪元素的特点，利用它们的灵活性，可以为我们提供更多的特性，下面总结一下目前想到的伪元素的优缺点：

优点/用途

• 减少 dom 节点数
• 让 css 帮助解决一部分 js 问题，让问题变得简单

缺点

• 不利于 SEO
• 代码读起来 “可能” 会有疑惑

2015-04-27

跳转进入
http://fromwiz.com/share/s/2V9-cs1em4io2riZS41ZV1oI3-WuEK0kTkfL2eu-YC1Tud9g

前端可选的视频直播协议大致只有两种：

• RTMP（Real Time Messaging Protocol）
• HLS（HTTP Live Streaming）
  其中 RTMP 是 Adobe 开发的协议，无法在 iPhone 中兼容，故目前兼容最好的就是 HLS 协议了。

HTTP Live Streaming（HLS）是苹果公司实现的基于 HTTP 的流媒体传输协议，可实现流媒体的直播和点播。原理上是将视频流分片成一系列 HTTP 下载文件。所以，HLS 比 RTMP 有较高的延迟。

前端播放 HLS

• Native 支持
  

  1. Android 3.0+
  2. iOS 3.0+

• flash 支持
  

  1. Flowplayer（GPL ×）
  2. GrindPlayer（MIT）
  3. video-js-swf（Apache License 2.0）
  4. MediaElement.js（MIT）
  5. clappr（BSD IE10+ ×）

最后，由于 MediaElement 已经纳入 WordPress 的核心视音频库，以及其良好的兼容性（见下图），所以最后选择使用 MediaElement.js 来实现。

切片准备

可使用 m3u8downloader 下载一个 HLS 源，或者使用 node-m3u 生成 m3u8 索引和 MPEG-TS 切片，下面是我们准备切片：

https://github.com/miniflycn/HLS-demo/tree/master/m3u8

注意看切片索引文件：

其中 #EXT-X-ENDLIST 为切片终止标记，如果没有该标记，浏览器会在文件读取完后再请求索引文件，如果有更新则继续下载新文件，以此达到直播效果。

前端代码

效果

例子源码

https://github.com/miniflycn/HLS-demo

一般来说我们的 footer 是跟着内容走的，所以当内容较少不足一屏的时候，footer 也会跟着内容往上走，导致下面一段空白。所以这里我们来探讨下当内容不足一屏时 footer 也要紧贴底部的情况，因为比较难以描述，所以干脆使用了英文标题，要实现的效果如下：

第一个和第三个为正常不处理的情况，第二个和第三个是我们要实现的情况

以前因为要兼容 ie7-，所以对结构比较有要求，实现起来也比较复杂。这里我们先讨论下 ie8+的情况，然后在来讨论下更高级的 flex 实现。

ie8+

实现思路为：设置 body 最小高度为 100%，相对定位，然后空出底部的高度，关键是要设置盒模型 box-sizing 为 border-box 或 padding-box，最后将 footer 绝对定位在底部即可。

html 代码如下：

css 代码如下：

flex

flex 实现其实比上面的要求更严格，上面的几乎对结构没要求，而 flex 则对 footer 的兄弟元素是有要求的。

主要思路是设置 flex 的方向为垂直方向，然后设置内容占满其余的空间

html 代码如下：

css 代码如下：