巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站专提News

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

一佰互联网站开辟设想(www.taishanly.com) 颁布发表日期 2020-04-21 17:23:37 阅读数: 129

CSS 有两个说不上经常利用的伪类 :before 和 :after,偶然会被人用来增添些自界说格局甚么的,可是它们的服从不只于此。头几天发明了 Creative Link Effects 这个很是成心思的先容创意链接殊效的页面,外面惊人的结果大批利用到的特征除 transform 属性停止变形以外,便是接上去要先容的这两个伪元素了。

一 根基语法
在领会进阶的利用之前,先来领会一下语律例则。泛泛仅仅须要将这两个伪元素用于增添一些自界说字符时,只要利用伪类利用的单冒号写法,以保障阅读器的兼容性:

CSS Code复制内容到剪贴板
  1. p:before  {}  

不过,在 CSS3 中为了区分伪元素和伪类为伪元素利用了双冒号,因此若是利用了 display 或 width 等属性时使得显现离开了本来元素后,倡议按照规范双写。过于老的阅读器能够会存在撑持题目,不过伪元素大多是共同 CSS3 利用,就无所谓向下兼容了:

CSS Code复制内容到剪贴板
  1. img::after {}  

这两个伪类下独有的属性 content ,用于在 CSS 衬着中向元素逻辑上的头部或尾部增添内容。注重这些增添不会转变文档内容,不会呈此刻 DOM 中,不可复制,仅仅是在 CSS 衬着层插手。比拟有效的因此下几个值:

[String] – 利用引号包含一段字符串,将会向元素内容中增添字符串。示例:

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

二 进阶手艺
断根浮动是一个经常会碰到的题目,不少人的处理方法是增添一个空的 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: -1;   
  5.  color#DDD;   
  6.  font-size120px;   
  7.  font-familyserif;   
  8.  font-weightbolder;   
  9. }  

三 殊效妙用
除简略的增添字符,共同 CSS 壮大的定位和殊效特征,完整能够到达给简略的元素别的附加最多两个容器的结果。有一点须要注重的是,若是不须要内容仅共同款式属性做出结果,内容属性也不能为空,即 content:”” 。不然,其余的款式属性一律不会失效。

鼠标移上链接,呈现方括号:

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: -15%%;   
  17.  left: -14%%;   
  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.  }  
一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

相干消息more

28
03月
福特/公共组建计谋同盟 不触及交互持股

简介:2019年1月15日,福特汽车和公共团体正式颁布发表两边将组建一个营业规模普遍的计谋同盟,并签订了首项协作和谈。按照和谈,两家公司最早将在... >>概况

05
04月
网站扶植并不难,主要的是坚持耐烦

网站扶植是一门比拟风趣味的专业常识,跟着收集手艺的不时成长前进,人们对网站的主要性也体味的愈来愈深入,以是良多人起头想着进入这一领... >>概况

18
05月
银行建电商还击“余额宝”们防鲸吞存款-www

window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":... >>概况

28
03月
本日头条做了个交际利用,给抖音用户筹办的

简介:本日头条母公司字节跳动颁布发表了第一款交际产物多闪。据颁布发表会现场先容,多闪是一款为年青用户设想的视频交际产物,想经由过程发送视频谈天的体例来聚... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站