您的位置:首页> 日志> 前端技术 正文

一、定义

:before   选择器在被选元素的内容前面插入内容。

 :after     选择器在被选元素的内容后面插入内容。

二、使用

 使用 content 属性来指定要插入的内容。它的有用的几个值:

 1、[String] – 使用引号包括一段字符串,将会向元素内容中添加字符串。

示例:   a:after { content: "↗"; }

2、attr() – 调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。

示例:a:after { content:"(" attr(href) ")"; }

3、url() / uri() – 用于引用媒体文件。

示例:h3::before { content: url(logo.png); }

4、counter() –  调用计数器,可以不使用列表元素实现序号功能。

示例:h3:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

三、应用

1、文字提示

2、 清浮动

3、模拟float:center

4、实现一些小图标、小图形:比如五角星、搜索图标等等

5、列表序号

6、动画效果

比如:上海市政府网站内页各板块鼠标放上去边线左右移动显示效果

 

  1. /* panel */ 
  2. .panel { 
  3.     positionrelative
  4.     overflowhidden
  5.     margin-bottom20px
  6.     padding0 20px
  7.     border-radius: 0
  8.     -webkit-transition: all .15s ease-in-out; 
  9.     transition: all .15s ease-in-out; 
  10.     border0
  11. .panel:hover:after, 
  12. .panel:hover:before { 
  13.     positionabsolute
  14.     left: 0
  15.     right: 0
  16.     height1px
  17.     background#bf0c0d
  18.     content''
  19. .panel:hover:after { 
  20.     top: 0
  21.     animation:panel-top-solid 5s infinite alternate;  
  22.     -webkit-animation:panel-top-solid 5s infinite alternate ;  
  23.     -moz-animation:panel-top-solid 5s infinite alternate ;  
  24.     -o-animation:panel-top-solid 5s infinite alternate ;  
  25.     -ms-animation:panel-top-solid 5s infinite alternate ;  
  26. @keyframes panel-top-solid{  
  27.     0% {left:0;}  
  28.     50% { left: 100%;} 
  29.     100% {left:0;}  
  30.   }  
  31.   @-webkit-keyframes panel-top-solid{  
  32.     0% {left:0;}  
  33.     50% { left: 100%;} 
  34.     100% {left:0;}  
  35.   }  
  36.   @-moz-keyframes panel-top-solid{  
  37.     0% {left:0;}  
  38.     50% { left: 100%;} 
  39.     100% {left:0;}   
  40.   }  
  41.   @-o-keyframes panel-top-solid{  
  42.     0% {left:0;}  
  43.     50% { left: 100%;} 
  44.     100% {left:0;}   
  45.   }  
  46.   @-ms-keyframes panel-top-solid{  
  47.     0% {left:0;}  
  48.     50% { left: 100%;} 
  49.     100% {left:0;}  
  50.   }  
  51.  
  52. .panel:hover:before { 
  53.     bottom: 0
  54.     animation:panel-bottom-solid 5s infinite alternate;  
  55.     -webkit-animation:panel-bottom-solid 5s infinite alternate ;  
  56.     -moz-animation:panel-bottom-solid 5s infinite alternate ;  
  57.     -o-animation:panel-bottom-solid 5s infinite alternate ;  
  58.     -ms-animation:panel-bottom-solid 5s infinite alternate ;  
  59. @keyframes panel-bottom-solid{  
  60.     0% {right:0;}  
  61.     50% { right: 100%;} 
  62.     100% {right:0;}  
  63.   }  
  64.   @-webkit-keyframes panel-bottom-solid{  
  65.     0% {right:0;}  
  66.     50% { right: 100%;} 
  67.     100% {right:0;}  
  68.   }  
  69.   @-moz-keyframes panel-bottom-solid{  
  70.     0% {right:0;}  
  71.     50% { right: 100%;} 
  72.     100% {right:0;}   
  73.      
  74.   }  
  75.   @-o-keyframes panel-bottom-solid{  
  76.     0% {right:0;}  
  77.     50% { right: 100%;} 
  78.     100% {right:0;}   
  79.   }  
  80.   @-ms-keyframes panel-bottom-solid{  
  81.     0% {right:0;}  
  82.     50% { right: 100%;} 
  83.     100% {right:0;}  
  84.   } 
  85.  
  86. <div class="panel">
       内容...
    </div>