Welcome, Old Sport!

css系列教程 – 伪元素::before

by ilikecss ON 2015/05/20 5123

css系列教程之伪元素::before伪元素::before, 指插入的内容在被指定的元素之前显示,通过css样式中的content来指定插入的具体内容。比如你有一段文字想要在段落开始加上引号,则我们可以使用伪元素::before来实现。

.before::before {
  content: "\201C";
  padding: 5px;
  color: gray;
  font-size: 60px;
  font-family: georgia;
}

参照上面的案例代码, 在.before样式定义了::before属性,所以我们可以在网页中看到的结果是在”20150520,沪指冲击4500点,创业板持续发力,站上3400点.午后惯例跳水!”之前插入了引号。我们引号是通过指定content里的内容生成的,而且使用的是字符转义标记生成的符号。
在线生成器→ http://www.evotech.net/blog/2007/08/css-javascript-character-entities/

上一篇文章提到的::after和今天的::before的content内容可以设置为空,最经典的案例就是用来清除浮动。参考下面的代码:

.cf:before,
.cf:after {
    content: " "; 
    display: table; 
}

注意事项:

我们需要注意的是通过伪元素::before生成的图片或文字是计入DOM的,一般我们可以通过浏览器开发者工具来查看content的内容。

请注意区分符号(:)和(::),在css1和css2里面伪元素也是使用一个冒号,就类似于伪类:hover, 然后在css3中引入了双冒号(::)来加以区分。单个冒号(:)被所有浏览器支持,然而双冒号(::)则需要支持IE8以上的高级浏览器。

Chrome Safari Firefox Opera IE Android iOS
2+ 1.3+ 3.5+ 6+ 8+ Yep Yep
14条评论
  1. #1

    香港主机说道:

    :sad: :sad: 不是那块料~~好久之前就说学CSS。结果到现在还没学会哈哈

  2. #2

    意大利面说道:

    有机会 我试试

  3. #3

    意大利面说道:

    把域名换了!工作也换了!~~~~什么都是从零开始啊!什么都从头学,边学边做!~~~~~~自己网站上想做个links都弄不出来,哈哈哈

  4. :roll: :roll: CSS一直让我觉得深不可测 :???: :???:

  5. #5

    打纸牌的驼鹿说道:

    :twisted: 新弄了blog 还没定义好 等整好以后可以友链下吗? :lol: http://www.Solitairen.com

  6. #6

    yameimei说道:

    拜读一下,哈哈

  7. #7

    美女美腿说道:

    :grin: :smile: wordpress很强大内容值得参考

  8. :oops: 博客很不错,正在学习呢,怎么搜藏啊 :mrgreen:

  9. 网站很不错,路过支持一下!

  10. #10

    不亦乐乎说道:

    以前有遇到在有的div里加before和after伪元素不起作用,不知道是为什么。




TOP