伪元素 before 和 after 初探

使用了 CodePen 做演示,欢迎点击预览

定义

首先来看 MDN 的定义:

::before 创建一个伪元素,作为已选中元素的第一个子元素,常通过 content 属性来为一个元素添加修饰性的内容。

::after 创建一个伪元素,作为已选中元素的最后一个子元素,常通过 content 属性来为一个元素添加修饰性的内容。

语法

/* CSS3 语法 */
element::before { 样式 } /* (单冒号)CSS2 */
element:before { 样式 }

CSS3 引入 :: 用来区分伪类和伪元素。

使用

添加引号

首先看一下基本使用,在 q 标签的前后加上 « 和 »。

HTML

<q>Some quotes,</q> he said, <q>are better than none.</q>

CSS

q::before {
content: "«";
color: blue;
} q::after {
content: "»";
color: red;
}

Result

Adding quotation marks

绘制一个缸的正面图形。

HTML

<div class='vat'></div>

CSS

.vat {
width: 160px;
height: 160px;
border-radius: 160px;
background-color: #919191;
position: relative;
} .vat::before {
content: "";
width: 160px;
height: 40px;
background-color: white;
position: absolute;
} .vat:after {
content: "";
width: 160px;
height: 10px;
background-color: white;
position: absolute;
bottom: 0;
}

Result

vat

孔方兄

绘制一个圆形方孔的图形。

HTML

<div class="money"></div>

CSS

.money {
width: 160px;
height: 160px;
border-radius: 160px;
background-color: #8b653a;
position: relative;
} .money:after {
content: "";
width: 50px;
height: 50px;
background-color: white;
position: absolute;
bottom: 55px;
left: 55px;
}

Result

money

待办清单

一个简单的代办清单,奇数次点击可打钩,偶数次点击取消打钩。

HTML

<ul>
<li>Buy milk</li>
<li>Take the dog for a walk</li>
<li>Exercise</li>
<li>Write code</li>
<li>Play music</li>
<li>Relax</li>
</ul>

CSS

li {
list-style-type: none;
position: relative;
margin: 2px;
padding: 0.5em 0.5em 0.5em 2em;
background: lightgrey;
font-family: sans-serif;
} li.done {
background: #CCFF99;
} li.done::before {
content: '';
position: absolute;
border-color: #009933;
border-style: solid;
border-width: 0 0.3em 0.25em 0;
height: 1em;
top: 1.3em;
left: 0.6em;
margin-top: -1em;
transform: rotate(45deg);
width: 0.5em;
}

Javascript

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if( ev.target.tagName === 'LI') {
ev.target.classList.toggle('done');
}
}, false);

Result

Todo List

参考

[1] ::before

伪元素 before 和 after 初探的更多相关文章

  1. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  2. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  3. CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

  4. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

  5. Effective前端4:尽可能地使用伪元素

    伪元素是一个好东西,但是很多人都没怎么用,因为他们觉得伪元素太诡异了.其实使用伪元素有很多好处,最大的好处是它可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简洁优雅 ...

  6. jQuery如何改变css伪元素样式

    首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设 ...

  7. 伪元素::after和::before

    ::after是一个CSS伪元素,使用::after,你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西).虽然最终生成的东西并不是真正的DOM里的内容,但这些内容能像普通内容一样显示, ...

  8. bootstrap之伪元素

    bootstrap之伪元素 参考地址:http://www.cnblogs.com/keyi/p/5943178.html http://www.runoob.com/css/css-pseudo-e ...

  9. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

随机推荐

  1. mui webview 预加载

    所谓的预加载技术就是在用户尚未触发页面跳转时,提前创建目标页面,这样当用户跳转时,就可以立即进行页面切换,节省创建新页面的时间,提升app使用体验.mui提供两种方式实现页面预加载. 方式一:通过mu ...

  2. Yahoo!团队:网站性能优化的35条黄金守则

    Yahoo!的 Exceptional Performance团队为改善 Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.最佳实践的核心 ...

  3. 项目引入nacos 日志不显示问题

    禁用nacos的日志即可解决 idea当中 添加vm options参数即可 -Dnacos.logging.default.config.enabled=false 打包后的启动命令  java - ...

  4. Linux 杀死进程方法大全(kill,killall)

    杀死进程最安全的方法是单纯使用kill命令,不加修饰符,不带标志.   首先使用ps -ef命令确定要杀死进程的PID,然后输入以下命令:   # kill -pid   注释:标准的kill命令通常 ...

  5. Ubuntu虚拟环境的搭建

    转载:https://blog.csdn.net/weixin_43078957/article/details/86006240 虚拟环境的搭建1.pip install virtualenv这个要 ...

  6. python学习笔记(12)常用模块

    一.模块.包 什么是模块? 模块实质上就是一个python文件,它是用来组织代码的,意思就是说把python代码写到里面,文件名就是模块的名称,test.py test就是模块名称. 什么是包? 包, ...

  7. VB6实现Excel多工作簿数据合并

    以前的同事,工作需要,让我帮忙完成多个工作簿的汇总. 我就用最熟悉的VB6写了一个Form应用程序,这是因为我不知道她目前的系统和Office情况,如果太高大上了,她不会部署安装.索性就简单粗暴地来个 ...

  8. XGBoost使用篇(未完成)

    1.截止到本文(20191104)sklearn没有集成xgboost算法,需要单独安装xgboost库,然后导入使用 xgboost官网安装说明 Pre-built binary wheel for ...

  9. Linux把内存挂载成硬盘提高读写速度

    tmpfs是一种虚拟内存文件系统正如这个定义它最大的特点就是它的存储空间在VM里面,这里提一下VM(virtual memory),VM是由linux内核里面的vm子系统管理,现在大多数操作系统都采用 ...

  10. Python实现:生产者消费者模型(Producer Consumer Model)

    #!/usr/bin/env python #encoding:utf8 from Queue import Queue import random,threading,time #生产者类 clas ...