那些你所不知道的CSS ::before 和::after 伪元素用法

2021-01-20 20:49 jianzhan

CSS 有两个说不上常见的伪类 :before 和 :after,有时候会被人用来加上些自定文件格式甚么的,可是它们的功能不但于此。前几日发现了 Creative Link Effects 这个十分成心思的详细介绍艺术创意连接殊效的网页页面,里边惊人的实际效果很多应用到的特点除 transform 特性开展形变以外,便是接下来要详细介绍的这两个伪元素了。

Creative Button Styles

 1 基础英语的语法

在掌握进阶的运用以前,先来掌握1下英语的语法标准。平时仅仅必须将这两个伪元素用于加上1些自定标识符时,只需应用伪类应用的单冒号写法,以确保访问器的适配性:

CSS Code拷贝內容到剪贴板
  1. p:before  {}    

但是,在 CSS3 中以便差别伪元素和伪类为伪元素应用了双冒号,因而假如应用了 display 或 width 等特性时使得显示信息摆脱了本来元素后,提议依照规范双写。过度老的访问器将会会存在适用难题,但是伪元素大多数是相互配合 CSS3 应用,就没有谓向下适配了:

CSS Code拷贝內容到剪贴板
  1. img::after {}     

这两个伪类下独有的特性 content ,用于在 CSS 3D渲染中向元素逻辑性上的头顶部或尾部加上內容。留意这些加上不容易更改文本文档內容,不容易出現在 DOM 中,不能拷贝,仅仅是在 CSS 3D渲染层添加。较为有效的是下列几个值:

•[String] - 应用引号包含1段标识符串,可能向元素內容中加上标识符串。示例:

CSS Code拷贝內容到剪贴板
  1. •a:after { content"↗"; }     
attr() – 启用当今元素的特性,能够便捷的例如将照片的 Alt 提醒文本或连接的 Href 详细地址显示信息出来。示例:
CSS Code拷贝內容到剪贴板
  1. •a:after { content:"(" attr(href) ")"; }     
url() / uri() – 用于引入新闻媒体文档。示例:
CSS Code拷贝內容到剪贴板
  1. •h1::before { contenturl(logo.png); }     
counter() –  启用计数器,能够不应用目录元素完成编号作用。实际请参照 counter-increment 和 counter-reset 特性的用法。示例:
CSS Code拷贝內容到剪贴板
  1. h2:before { countercounter-increment: chapter; content"Chapter " counter(chapter) ". " }   

2 进阶技能

消除波动是1个经常会遇到的难题,很多人的处理方法是加上1个空的 div 运用 clear:both; 特性。如今,不用提升沒有实际意义的元素,仅必须下列款式便可在元素尾部全自动消除波动:

CSS Code拷贝內容到剪贴板
  1. .clear-fix { *overflowhidden; *zoom: 1; }     
  2. .clear-fix:after { display: table; content""width: 0; clearboth; }     

很多人喜爱给 blockquote 引入段加上极大的引号做为情况,这类情况下大家便可以用 :before 来替代 background 了,便可以给情况留下室内空间,还能够立即应用文本而非照片:

CSS Code拷贝內容到剪贴板
  1. blockquote::before {     
  2.     contentopen-quote;     
  3.     positionabsolute;     
  4.     z-index: ⑴;     
  5.     color#DDD;     
  6.     font-size120px;     
  7.     font-familyserif;     
  8.     font-weightbolder;     
  9. }    

 3 殊效妙用

除简易的加上标识符,相互配合 CSS 强劲的精准定位和殊效特点,彻底能够做到给简易的元素此外额外数最多两个器皿的实际效果。有1点必须留意的是,假如不必须內容仅相互配合款式特性做出实际效果,內容特性也不可以为空,即 content:”" 。不然,别的的款式特性1概不容易起效。

飘浮出現方括号

电脑鼠标移上连接,出現方括号:

CSS Code拷贝內容到剪贴板
  1. a {     
  2.     positionrelative;     
  3.     displayinline-block;     
  4.     outlinenone;     
  5.     text-decorationnone;     
  6.     color#000;     
  7.     font-size32px;     
  8.     padding5px 10px;     
  9. }     
  10.      
  11. a:hover::before, a:hover::after { positionabsolute; }     
  12. a:hover::before { content"\5B"left: -20px; }     
  13. a:hover::after { content"\5D"rightright:  -20px; }     

一样,大家只必须相互配合 display: block 和 position: absolute ,便可以将其当做两个器皿,拼生成飘浮出現双边框的殊效:

CSS Code拷贝內容到剪贴板
  1. a {     
  2.     positionrelative;     
  3.     displayinline-block;     
  4.     outlinenone;     
  5.     text-decorationnone;     
  6.     color#000;     
  7.     font-size32px;     
  8.     padding: 0 10px;     
  9. }     
  10.      
  11. /* 大框 */     
  12. a:hover::before, a:hover::after {      
  13.     content"";     
  14.     displayblock;     
  15.     positionabsolute;     
  16.     top: ⑴5%%;     
  17.     left: ⑴4%%;     
  18.     width: 120%;     
  19.     height: 120%;     
  20.     border-stylesolid;     
  21.     border-width4px;     
  22.     border-color#DDD;     
  23.  }     
  24.      
  25. /* 小框 */     
  26.  a:hover::after {     
  27.     top: 0%;     
  28.     left: 0%;     
  29.     width: 100%;     
  30.     height: 100%;     
  31.     border-width2px;     
  32.  }    

以上这篇那些你所不知道的CSS ::before 和::after 伪元素用法便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

原文详细地址:http://www.cnblogs.com/androidshouce/archive/2016/06/12/5576493.html