伪元素

伪类是用一个:，例如 :hover 而伪元素则是::，例如：::before，虽然一个 : 也会生效，但是不推荐

常用的伪元素（考虑兼容性）

- ::first-line
- ::first-letter
- ::before
- ::after

first-line

p::first-line {
  text-transform: uppercase;
  color: cornflowerblue;
}

这一段代码把段落的第一行字母变为大写，

需要注意的是第一行指的是排版后显示的第一行，跟 HTML 代码中的换行无关

css 中 first-line 必须出现在最内层的块级元素（p）之内，嵌套文字不可使用 first-line

行内元素 span 使用 first-line 无效

first-letter

::first-letter 表示文本首字母，常见的一种文字排版方式是首字母大写并且浮动在最左边

它与 ::first-line 的区别在于，可作用于任何标签

::before 和 ::after

这两个伪元素跟前面两个不同的是，它不是把已有的内容套上一个元素，而是真正的无中生有，造出一个元素

• ::before 表示在元素内容之前插入一个虚拟的元素
• ::after 则表示在元素内容之后插入 这两个伪元素所在的 CSS 规则必须指定 content 属性才会生效，看下例子：

p.special::before {
  display: block;
  content: "pseudo! ";
}
p.special::after {
  display: block;
  content: counter(chapno, upper-roman) ". ";
}

::before 和 ::after 中支持所有的 CSS 属性。实际开发中，这两个伪元素非常有用，有了这两个伪元素，一些修 饰性元素，可以使用纯粹的 CSS 代码添加进去，这能够很好地保持 HTML 代码中的语义，既完成了显示效果，又不会 让 DOM 中出现很多无语义的空元素

一个 div 实现太极图

使用 border-left border-right border-radius 来画一个太极图背景

.tj {
  position: relative;
  width: 0;
  height: 200px;
  border-left: 100px solid #ffffff;
  border-right: 100px solid #000000;
  border-radius: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.tj::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 35px solid #ffffff;
  background-color: #000000;
  border-radius: 100%;
  left: -50px;
  top: 100px;
}
.tj::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 35px solid #000000;
  background-color: #ffffff;
  border-radius: 100%;
  left: -50px;
  top: 0;
}

@keyframes rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.tj {
  /*...*/
  animation: rotation 3.33s linear infinite;
}