伪元素

作者: hanjy | 来源:发表于2016-03-09 22:47 被阅读0次

:before :after

伪元素

可以为元素添加更多的样式
注意设置content

例子

#nav-toggle span,#nav-toggle span:before,#nav-toggle span:after{
   width: 35px;height: 7px;   
  position: absolute;
  border-radius: 2px; 
  display: block; 
  background-color: #353535;
  content:''
}
#nav-toggle span:before{top:-10px}
#nav-toggle span:after{bottom: -10px}
#nav-toggle.active span{background-color: transparent}
#nav-toggle.active span:before{transform: rotate(45deg);top:0}
#nav-toggle.active span:after{transform:translateY(-10px) rotate(-45deg)}

该方法实现了图标变化

相关文章

  • 细说CSS伪类和伪元素

    原文 博客原文 大纲 1、伪元素2、伪类元素3、伪元素和伪类元素的区别4、伪类和伪元素的使用 1、伪元素 伪元素在...

  • 伪元素和伪类

    本文将介绍伪元素和伪类选择器的一些知识,以及在VUE中伪元素的动态数据更新; 伪元素和伪类: 伪元素:在内容元素的...

  • css 实现分割线的N种方法

    1.伪元素+transform:translateX(-100%); 伪元素 结合 定位 2.伪元素+flex (...

  • 巧用伪元素和伪类让我们的html结构更清晰合理

    css3为了区分伪类和伪元素,伪元素采用双冒号写法。 伪元素: [ 伪元素用于向某些选择器设置特殊效果,简单来说,...

  • CSS基础之伪类伪元素&样式优先权

    伪类&伪元素 首字样式控制 —— 使用伪元素::first-letter 首行样式控制 —— 使用伪元素::fir...

  • 伪元素初解

    一、伪元素与伪类 1. 常见的伪类 2. 伪元素 二、伪元素(这里只说::before和::after) 1. 了...

  • 伪元素和伪类

    伪元素和伪类 什么是伪元素? CSS 在渲染文档的时候,伪元素可以通过 css 给 HTML 添加一个元素(叫标签...

  • CSS伪类和伪元素

    1. 什么是伪类和伪元素1.1. 伪类1.2. 伪元素1.3. 伪类与伪元素的区别 2. 使用 1. 什么是伪类和...

  • 伪元素before&after以及制作三角箭头

    1.:before伪元素和:after伪元素是干嘛用的 它们会在内容元素的前后插入额外的元素,:before伪元素...

  • 伪类/伪元素

    伪类【:】 伪元素【::】

网友评论

      本文标题:伪元素

      本文链接:https://www.haomeiwen.com/subject/pjktlttx.html