::before ::after

概述 Overview

.非常有用；非常有用；非常有用：你能想到的任何小设计都可以使用它们实现

.为指定元素插入子节点，类型是inline

.::before第一个孩子；::after是最后一个孩子；可按照普通元素对其进行定位、布局、旋转等等操作；注意：旋转会撑开/破坏布局，请为父元素设置overflow溢出隐藏；同样需要注意的是：他们的box-sizing也要初始化为border-box

.必须指定 content 属性定义要追加的内容；可以使用普通字符、CSS实体；也可利用attr()获取元素属性；content拼接字符串不能使用+，直接在后面添加即可

.content属性不支持变量使用var()，可以通过计数器迂回实现

dom::before {
    content: "";       
}

样式初始化

.不仅普通元素要初始化，必要时伪元素也需要初始化

*, 
*::before, 
*::after {
    display: block;
    box-sizing: border-box;
}

案例 Cases

[] JD购物车

.伪元素：使用::before显示商品数量[从后台获取数据]

.初始化：button取消边框、轮廓、背景

.定位：父相子绝，使伪元素右上定位

.cart::before {
  content: '8';
  position: absolute;
  top: -10px;
  right: -10px;
}

[] 进度条

.伪元素::before、::after

.内联变量

.自定义属性 data-

.CSS属性函数 attr()、计算函数 calc()

.定位 position

.盒阴影 box-shadow

[HTML]

<div class="bar" style="--per:10;--color:#f40;" data-txt="考勤">
  <div></div>
</div>
<div class="bar" style="--per:40;--color:#890;" data-txt="作业">
  <div></div>
</div>
<div class="bar" style="--per:20;--color:#089;" data-txt="笔记">
  <div></div>
</div>
<div class="bar" style="--per:30;--color:#908;" data-txt="互动">
  <div></div>
</div>

[CSS]

.bar {
  position: relative;
  width: 280px;
  height: 20px;
  margin: 2rem auto;
  border-radius: 20px;
  border: 4px solid transparent;
  box-shadow: 0 0 0 1px var(--color);
}

.bar div {
  width: calc(var(--per)*1%);
  height: 100%;
  background-color: var(--color);
  border-radius: 20px;
}

.bar::before {
  content: attr(data-txt);
  position: absolute;
  top: -10px;
  left: -40px;
}

.bar::after {
  counter-reset: per var(--per);
  content: counter(per)'%';
  position: absolute;
  top: -10px;
  right: -40px;
}

[] 模拟有序列表 - list

方案1. 利于伪元素配合属性获取实现[使用data-定义属性]

方案2. 也可以使用计数器 counter 实现[计数器支持变量哦]

HTML

CSS

.ul-item::before {
    content: attr(data-ind)'. ';
}

[] 模拟无序列表 - list

. 利于伪元素配合 CSS Entity 实现

item1
item2
item3

.ul-entity li::before {
    content: '\260E'' ';
}

[] 环环相扣-RING

[] 时钟clock

[] 倒影

. 一个伪元素作为文字

. 一个伪元素作为渐变背景遮罩：透明到白色或白色透明到白色

. 伪元素会继承文字阴影，需要单独去掉伪元素的阴影效果

hi,there

[] 标题修饰

. 利用::before和::after划线，配合弹性布局实现

. 更多案例，参考开课啦标题设计

.headline-pse {
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 24px;
    margin: 1rem auto;
}

.headline-pse::before, .headline-pse::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: #333;
}

[ ]

1. 如何为文字两侧增加空白

2. 不使用伪元素如何实现？[提示：使用小高度、大字体和边框，把文字挤下来]

总结与作业 Summary & Homework

总结: . 伪元素的使用
作业: . 分别完成以上案例; . 利用伪元素优化个人网站