CSS中:before和:after伪元素应用的奇技淫巧

日期:2021-03-04 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

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

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.  }