关于伪类元素:before和:after

 　CSS中存在一些比较特殊的属性，称之为伪类，它们之中最常用的就是定义链接的伪

:link：未被访问状态

:visited：已被访问状态

:hover：鼠标悬停状态

:active：活动状态

    除了它们，还有一些不被常使用的伪类，有:focus，:first-child，:lang等。

:focus：选择器用于选取获得焦点的元素。

:first-child：某个标签的第一个元素，例：li

:last-child：某个标签的最后一个元素。

而且CSS里不光有伪类，还有伪元素，比如：:first-letter，:first-line，:before和:after。

?本文中其它伪元素暂且不表，单说:after伪元素。

after顾名思义是在元素后面的意思，实质是在元素之后添加内容。

这个伪元素允许制作人员在元素内容的最后面插入生成内容，需要和content属性一起使用，设置在对象后发生的内容。默认地，这个伪元素是inline行内元素，不过可以使用属性 display 改变这一点。  

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

1、:before和:after简例介绍

　　:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title></title>
    <style>
        #pid:before {
            content: "^^";
            color: red;
        }
        #pid:after {
            content: "!";
            color: red;
        }
    </style>
</head>
<body>
    <p id="pid">welcome to my home</p>
</body>
</html>

这段代码会在#pid元素内容之前插入一个'^^'，以及在内容之后添加一个'!'，插入的行内元素是作为#pid的子元素，效果如下:

如果没有content属性，伪类元素将没有任何作用。

但是可以指定content为空，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。

除了插入文字内容之外，还可以插入图片等。

2、:before和:after惊人用法

在这里展示一个常用的场景，很多人写过如下清除浮动的代码：

<div id="container">
    <div class="content-left">this is left content.</div>
    <div class="content-right">this is right content.</div>
    <div class="clear"></div>
</div>

对应的css代码如下：
.content-left{
    float: left;
    width: 150px;
     font-weight:bold;">red;
}
.content-right{
    float: right;
    width: 450px;
    font-weight:bold;">yellow;
}
.clear{
    clear: both;
}

为了清除上面的浮动，多添加了一个<div>元素，并给此<div>元素添加了clear样式，这种做法破坏了HTML5的语义化原则，因此应对css样式进行修改，添加如下代码：
 .clearfix{
      zoom: 1;
  }
  .clearfix:before,
  .clearfix:after{
      display: table;
      content: "";
  }
.clearfix:after{
    clear: both;
 }
只要在父容器上应用clearfix这个类即可实现清除浮动。。。

转自： http://www.cnblogs.com/smswei/p/5223496.html

关于伪类元素:before和:after的更多相关文章

  1. 玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

    在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素 ...

  2. 用一个例子学习CSS的伪类元素

    CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通 ...

  3. button不能添加伪类元素

    今日试了一下button添加伪类元素,结果是不行的前后都叠加在一起 html代码: <button class="form_btn" formType="submi ...

  4. css伪类元素：after 的多功能用法——任意大小的底边框

    需求用法出现的背景: 由于项目UI的优化,项目中所有tab导航选中的状态都是统一样式书写的,之前都是用的border-bottom,新的需求如果用以前的本办法就是定位一个选中边框在底部,但是涉及的模板 ...

  5. CSS样式学习-3、轮廓、伪类/元素、display-flex布局

    一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thic ...

  6. 伪类元素before&after

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 如何利用伪类元素和vertical-align: middle;实现元素相对于父元素居中

    HTML部分 <div class="zhihu"> <div class="loginMain"> </div> < ...

  8. 微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题 伪类元素

    同事找我解决一个问题 说安卓圆角没问题 苹果上失效了 我一看 其实就是没做兼容上图给你们看看 有没有看出来 其实就是父级设置圆角属性失效 父元素使用border-radius和overflow:hid ...

  9. js修改伪类元素样式

    <style type="text/css"> .htmlbox_close::before, .htmlbox_close::after { content: ''; ...

随机推荐

  1. 以http形式启动uwsgi服务

    uwsgi yourfile.ini # 配置文件 [uwsgi] http = 127.0.0.1:3106 socket = 127.0.0.1:3006 chdir = /www/student ...

  2. mysql查询所有字段(*),并且联表时需要特别注意的地方

    如果不标明*是读取哪个表,确实会将所有三个表都读出来.需要小心

  3. php常用Stream函数集介绍

    php常用Stream函数集介绍 作者: 字体:[增加 减小] 类型:转载 时间:2013-06-24   本篇文章是对php中的常用Stream函数集进行了详细的分析介绍,需要的朋友参考下     ...

  4. DirectX基础学习系列5 融合技术

    7.1融合方程 1概念 融合技术将当前光栅化像素的颜色与以前已光栅化并处于同一个位置的像素颜色进行合成,即将当前要进行光栅化的三角形单元与已写入后台的像素进行融合 2需要遵循的原则: (1)先绘制不需 ...

  5. MBR中“起始磁头/扇区/柱面“同"逻辑区块地址（LBA）"的区别

    "起始磁头/扇区/柱面"共有3个字节,最大能表示8G的扇区编号.当硬盘扇区编号多于8G时,此表示法便力不从心,便使用4个字节的LBA表示法(逻辑扇区地址,相对扇区地址). 算是计算 ...

  6. Nginx_Lua

    http://www.ttlsa.com/nginx/nginx-lua/ 1.1. 介绍ngx_lua – 把lua语言嵌入nginx中,使其支持lua来快速开发基于nginx下的业务逻辑该模块不在 ...

  7. composer autoload

    1.引入autoload 文件 include “vendor/autoload.php” 2.自定义的单文件引入 “autoload”:{ "files":["lib/ ...

  8. 12秒开机！ExpressCache SSD缓存加速

    SSD固态硬盘的读写速度比传统硬盘快了很多,读取速度能到300M/s 写入速度大约在80M/S 但SSD硬盘的价格也笔记机械硬盘高了很多,128G的固态硬盘淘宝价大概在800左右,想想现在随便一个软件 ...

  9. Java IO包装流如何关闭？

      问题: (1)JAVA的IO流使用了装饰模式,关闭最外面的流的时候会自动调用被包装的流的close()方吗? (2)如果按顺序关闭流,是从内层流到外层流关闭还是从外层到内存关闭? 问题(1)解释: ...

  10. FW Docker为容器分配指定物理网段的静态IP

    官方有关于网桥和IP配置的文档地址:https://docs.docker.com/articles/networking/ 1.宿主机(系统采用ubuntu-14.04.1-server-amd64 ...