css after 写法

在 CSS 中，使用 ::after 伪元素来在元素的内容之后插入内容。

选择器::after {
  content: "插入内容";
}

在这个例子中，选择器部分可以是任何一个 CSS 选择器。我们可以为不同的元素添加 ::after 伪元素，然后为它们添加不同的样式。

/* 为 p 元素添加 ::after 伪元素 */
p::after {
  content: "。";
  font-style: italic;
}

/* 为 ul 元素添加 ::after 伪元素 */
ul::after {
  content: "";
  display: block;
  clear: both;
}

在这个例子中，我们分别为 p 元素和 ul 元素添加了 ::after 伪元素。其中，p 元素的 ::after 伪元素会添加一个“。”标点符号，并将字体样式变成斜体。而 ul 元素的 ::after 伪元素则会创建一个空的块级元素，并清除浮动（使用 clear 属性）。

::after 伪元素也可以使用 content 属性来插入一些图形。如下所示：

/* 为一个链接添加箭头 */
a::after {
  content: "\2192";
  margin-left: 5px;
}

/* 为一个按钮添加一个“+”号 */
button::after {
  content: "+";
  font-size: 1.2em;
  margin-left: 5px;
}

在这个例子中，我们分别为一个链接和一个按钮添加了 ::after 伪元素，并使用 content 属性来插入箭头和“+”号。我们还设置了一些其他的样式，如字体大小和左边距。