目录
 
一 基本语法
二 进阶技巧
三 特效妙用
首页 web前端 html教程 你所不知的 CSS ::before 和 ::after 伪元素用法_html/css_WEB-ITnose

你所不知的 CSS ::before 和 ::after 伪元素用法_html/css_WEB-ITnose

Jun 24, 2016 pm 12:00 PM
css 元素 用法

本文等效灵感来自编程人生的一篇感悟。

CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了。

Creative Button Styles

 

一 基本语法

在了解进阶的应用之前,先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用伪类使用的单冒号写法,以保证浏览器的兼容性:

Html代码  

  1. p:before  {}  

 

不过,在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号,因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后,建议按照标准双写。过于老的浏览器可能会存在支持问题,不过伪元素大多是配合 CSS3 使用,就无所谓向下兼容了:

Html代码  

  1. img::after {}  

 

这两个伪类下特有的属性 content ,用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容,不会出现在 DOM 中,不可复制,仅仅是在 CSS 渲染层加入。比较有用的是以下几个值:

  • [String] - 使用引号包括一段字符串,将会向元素内容中添加字符串。示例:

    Html代码  

    1. a:after { content: "?"; }  
     
  • attr() ? 调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例:

    Html代码  

    1. a:after { content:"(" attr(href) ")"; }  
     
  • url() / uri() ? 用于引用媒体文件。示例:

    Html代码  

    1. h1::before { content: url(logo.png); }  
     
  • counter() ?  调用计数器,可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例:

    Html代码  

    1. h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }  
  •  

    二 进阶技巧

    清除浮动是一个时常会遇到的问题,不少人的解决办法是添加一个空的 div 应用 clear:both; 属性。现在,无需增加没有意义的元素,仅需要以下样式即可在元素尾部自动清除浮动:

    Html代码  

    1. .clear-fix { *overflow: hidden; *zoom: 1; }  
    2. .clear-fix:after { display: table; content: ""; width: 0; clear: both; }  

     

    许多人喜欢给 blockquote 引用段添加巨大的引号作为背景,这种时候我们就可以用 :before 来代替 background 了,即可以给背景留下空间,还可以直接使用文字而非图片:

    Html代码  

    1. blockquote::before {  
    2.     content: open-quote;  
    3.     position: absolute;  
    4.     z-index: -1;  
    5.     color: #DDD;  
    6.     font-size: 120px;  
    7.     font-family: serif;  
    8.     font-weight: bolder;  
    9. }  

     

    三 特效妙用

    除了简单的添加字符,配合 CSS 强大的定位和特效特性,完全可以达到给简单的元素另外附加最多两个容器的效果。有一点需要注意的是,如果不需要内容仅配合样式属性做出效果,内容属性也不能为空,即 content:”" 。否则,其他的样式属性一概不会生效。

    悬浮出现方括号

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

    Html代码  

    1. a {  
    2.     position: relative;  
    3.     display: inline-block;  
    4.     outline: none;  
    5.     text-decoration: none;  
    6.     color: #000;  
    7.     font-size: 32px;  
    8.     padding: 5px 10px;  
    9. }  
    10.   
    11. a:hover::before, a:hover::after { position: absolute; }  
    12. a:hover::before { content: "\5B"; left: -20px; }  
    13. a:hover::after { content: "\5D"; right:  -20px; }  

     

    同样,我们只需要配合 display: block 和 position: absolute ,就可以将其当成两个容器,拼合成悬浮出现双边框的特效:

    Html代码  

    1. a {  
    2.     position: relative;  
    3.     display: inline-block;  
    4.     outline: none;  
    5.     text-decoration: none;  
    6.     color: #000;  
    7.     font-size: 32px;  
    8.     padding: 0 10px;  
    9. }  
    10.   
    11. /* 大框 */  
    12. a:hover::before, a:hover::after {   
    13.     content: "";  
    14.     display: block;  
    15.     position: absolute;  
    16.     top: -15%%;  
    17.     left: -14%%;  
    18.     width: 120%;  
    19.     height: 120%;  
    20.     border-style: solid;  
    21.     border-width: 4px;  
    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-width: 2px;  
    32.  }  

     本文等效灵感来自编程人生的一篇感悟。用 :before 和 :after 伪类结合更多 CSS3 强大的特性,还可以完成非常多有意思的特效和 Hack ,这里权当抛砖引玉,诸位又能想出什么妙用呢?

    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    Video Face Swap

    Video Face Swap

    使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

    热工具

    记事本++7.3.1

    记事本++7.3.1

    好用且免费的代码编辑器

    SublimeText3汉化版

    SublimeText3汉化版

    中文版,非常好用

    禅工作室 13.0.1

    禅工作室 13.0.1

    功能强大的PHP集成开发环境

    Dreamweaver CS6

    Dreamweaver CS6

    视觉化网页开发工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)

    vue中怎么用bootstrap vue中怎么用bootstrap Apr 07, 2025 pm 11:33 PM

    在 Vue.js 中使用 Bootstrap 分为五个步骤:安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选:自定义样式。可选:使用插件。

    HTML,CSS和JavaScript的角色:核心职责 HTML,CSS和JavaScript的角色:核心职责 Apr 08, 2025 pm 07:05 PM

    HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

    了解HTML,CSS和JavaScript:初学者指南 了解HTML,CSS和JavaScript:初学者指南 Apr 12, 2025 am 12:02 AM

    WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

    bootstrap怎么设置框架 bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

    要设置 Bootstrap 框架,需要按照以下步骤:1. 通过 CDN 引用 Bootstrap 文件;2. 下载文件并将其托管在自己的服务器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根据需要编译 Sass/Less;5. 导入定制文件(可选)。设置完成后,即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。

    bootstrap怎么写分割线 bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

    创建 Bootstrap 分割线有两种方法:使用 标签,可创建水平分割线。使用 CSS border 属性,可创建自定义样式的分割线。

    bootstrap怎么插入图片 bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

    在 Bootstrap 中插入图片有以下几种方法:直接插入图片,使用 HTML 的 img 标签。使用 Bootstrap 图像组件,可以提供响应式图片和更多样式。设置图片大小,使用 img-fluid 类可以使图片自适应。设置边框,使用 img-bordered 类。设置圆角,使用 img-rounded 类。设置阴影,使用 shadow 类。调整图片大小和位置,使用 CSS 样式。使用背景图片,使用 background-image CSS 属性。

    bootstrap按钮怎么用 bootstrap按钮怎么用 Apr 07, 2025 pm 03:09 PM

    如何使用 Bootstrap 按钮?引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本

    bootstrap怎么调整大小 bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

    要调整 Bootstrap 中元素大小,可以使用尺寸类,具体包括:调整宽度:.col-、.w-、.mw-调整高度:.h-、.min-h-、.max-h-

    See all articles