伪元素 before 和 after 初探

孙吉亮发布于2019-08-22 15:40 / 338人阅读

摘要：伪元素和初探使用了做演示，欢迎点击预览定义首先来看的定义创建一个伪元素，作为已选中元素的第一个子元素，常通过属性来为一个元素添加修饰性的内容。语法语法样式单冒号样式引入用来区分伪类和伪元素。

伪元素 before 和 after 初探

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

定义

首先来看 MDN 的定义：

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

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

语法

/* CSS3 语法 */
element::before { 样式 }

/* （单冒号）CSS2 */
element:before  { 样式 }

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

使用 添加引号

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

HTML

Some quotes, he said, are better than none.

CSS

q::before { 
  content: "«";
  color: blue;
}

q::after { 
  content: "»";
  color: red;
}

Result

Adding quotation marks

缸

绘制一个缸的正面图形。

HTML

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

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


  Buy milk
  Take the dog for a walk
  Exercise
  Write code
  Play music
  Relax

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 任意元素和

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93647.html

伪元素 before 和 after 初探

摘要：伪元素和初探使用了做演示，欢迎点击预览定义首先来看的定义创建一个伪元素，作为已选中元素的第一个子元素，常通过属性来为一个元素添加修饰性的内容。语法语法样式单冒号样式引入用来区分伪类和伪元素。伪元素 before 和 after 初探使用了 CodePen 做演示，欢迎点击预览定义首先来看 MDN 的定义： ::before 创建一个伪元素，作为已选中元素的第一个子元素，常通过...

zacklee 2019-08-30 14:13 评论0 收藏0
伪元素 before 和 after 初探

摘要：伪元素和初探使用了做演示，欢迎点击预览定义首先来看的定义创建一个伪元素，作为已选中元素的第一个子元素，常通过属性来为一个元素添加修饰性的内容。语法语法样式单冒号样式引入用来区分伪类和伪元素。伪元素 before 和 after 初探使用了 CodePen 做演示，欢迎点击预览定义首先来看 MDN 的定义： ::before 创建一个伪元素，作为已选中元素的第一个子元素，常通过...

mdluo 2019-08-01 18:43 评论0 收藏0
详解 CSS 属性 - :before && :after

摘要：现在我们经常在源码中看到如下的写法这里的和就是我们今天来探讨的伪元素之二。举例说明在这里我们给伪元素添加了属性，并赋值为。这里需要注意两者使用的顺序，伪元素应该位于后面，如果顺序改为是无效的。现在我们经常在 html 源码中看到如下的写法： showImg(http://segmentfault.com/img/bVb9y2); 这里的 ::after 和 ::before 就是...

plokmju88 2019-08-28 17:51 评论0 收藏0
详解 CSS 属性 - :before && :after

摘要：现在我们经常在源码中看到如下的写法这里的和就是我们今天来探讨的伪元素之二。举例说明在这里我们给伪元素添加了属性，并赋值为。这里需要注意两者使用的顺序，伪元素应该位于后面，如果顺序改为是无效的。现在我们经常在 html 源码中看到如下的写法： showImg(http://segmentfault.com/img/bVb9y2); 这里的 ::after 和 ::before 就是...

CoderBear 2019-08-01 14:36 评论0 收藏0
css伪元素（before与after）

摘要：最近因为一些网页的需要，比较深入的使用了的伪元素，发现原来不只是用用或而已，可以玩的东西还真是不少，所以就来篇文章，把这些比较不常玩的用法纪录一下。最近因为一些网页的需要，比较深入的使用了CSS的伪元素（Pseudo Element），发现原来不只是用用before或after而已，可以玩的东西还真是不少，所以就来篇文章，把这些比较不常玩的用法纪录一下。什么是伪元素？伪元素之所以称...

shevy 2019-08-05 16:45 评论0 收藏0