伪元素选择器

@Pseudo element

. 并不是由传统的HTML标签创建出来，而是依附于已有的标签，所以叫伪元素

selector::pseudo-element {
    property: value;
}

::before ::after

. 创建一个 inline 元素作为第一个 first 子元素、最后一个 last 子元素

. 必须指定伪元素 content 属性，哪怕为空

. 可以使用普通字符、CSS实体；也可利用attr()获取元素属性

. content 拼接字符串不能使用+，直接在后面添加即可

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

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

. 伪元素的样式受父级元素的影响；但是伪元素不是元素的直接孩子，无法使用直接后代选择器 > 选择

. 应用非常非常非常广泛。。。可以使用任何形式的内容

<input>、<select>等可替换元素 replaced element 不可以使用伪元素

[] 样式初始化

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

[] 定制列表标记

使用普通字符

li::before {
    content: '>';
}

使用 CSS 实体

li::before {
    content: '\21E8';
}

使用元素属性；可以是自定义属性 data-

li::before {
  content: attr(data-ind);
}

使用图片；大图片调整大小应转为行块盒并指定溢出隐藏

li::before {
  content: url(./imgs/avatar.jpg);
  display: inline-block;/* MUST */
  overflow: hidden;/* MUST */
}

留空：做其他装饰性设计；如使用背景图片，可以配合弹性盒子 flex 实现特定布局

li::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../imgs/logo1.png);
    background-size: cover;
    border-radius: 50%;
}

使用阿里字体图标 - iconfont；需要指定字体家族为 iconfont

li {
  list-style: none;
}

li::before {
  content: '\e6e0';
  font-family: 'iconfont';
  color: #f40;
}

使用计数器；可以拼接普通字符或 CSS 实体

li::before {
content: counter(sn) '\21e8 ';
}

使用内联变量；需要显示的指定为字符串，无法直接使用；同样适用变量形式的字体图标

<div class="bar" style="--per:85;--num:'85';--info:'\e881'"></div>

.bar::before {
  content: var(--info);
  font-family: 'iconfont';
}

.bar::after {
  content: var(--num)'%';
}

::first-letter ::first-line

. 只能获取 block块元素的首字母、首行

. 获取的元素是内联元素 inline，无法转化为块元素 block！！！

. 设置的样式有限；常用样式有 padding、margin、color、background-color、line-height等

. ::first-letter 优先级高于 ::first-line

. 应用：首字下沉

::selection

. 元素被选择的部分

. 默认是蓝底白字

::placeholder

. 占位符样式；多用于表单元素 input

. 设置的样式有限

::marker

. 定义标记类型

. 适用于 display 为 list-item 的元素，如 <li>、<summary>

. 使用 content 属性指定内容

. 设置的样式有限

. 因为标记会破坏布局，基本很少使用

. 更多使用技巧，请访问MDN ::marker、list marker

li::marker {
  content: '✝ ';
  font-size: 1.2em;
}

案例 Cases

[] 购物车

[] 浏览器市场占有率

[] 技能条

[] 时钟