伪元素::after配合:not选择器使用 ::after 伪元素与 :not 选择器结合起来，可以实现对特定元素进行排

使用 ::after 伪元素与 :not 选择器结合起来，可以实现对特定元素进行排除操作，同时为其后续的伪元素应用样式。下面是一些示例，展示如何使用 :not 选择器与 ::after 伪元素。

示例：为除最后一个列表项以外的所有列表项添加下边框

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>:not with ::after Example</title>
<style>
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  li {
    padding: 10px;
    position: relative; /* 使 ::after 的定位相对于 li */
  }

  /* 为除了最后一个 li 以外的所有 li 添加下边框 */
  li:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #000;
  }
</style>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</body>
</html>

解释

基础样式：
- ul 的样式移除了默认的列表样式、内边距和外边距。
- li 的样式添加了一些内边距，并将其定位设置为 relative，以便 ::after 伪元素可以相对于 li 定位。
伪元素 ::after：
- 使用 li:not(:last-child)::after 选择所有不是最后一个的 <li> 元素，并为它们添加一个 ::after 伪元素。
- content: "" 创建一个空的伪元素。
- position: absolute 将伪元素定位为绝对定位。
- bottom: 0, left: 0, right: 0, height: 1px 设置伪元素的大小和位置，使其作为下边框显示。
- background-color: #000 设置伪元素的背景颜色，使其看起来像一个下边框。

另一个示例：为非特定类的元素添加特殊符号

假设你有一组列表项，其中一些具有特殊类，只有不具有该特殊类的列表项需要添加一个特殊符号。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>:not with ::after Example</title>
<style>
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  li {
    padding: 10px;
  }

  /* 为不具有 special 类的 li 添加符号 */
  li:not(.special)::after {
    content: " ★";
    color: gold;
  }
</style>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li class="special">Item 2</li>
    <li>Item 3</li>
    <li class="special">Item 4</li>
  </ul>
</body>
</html>

解释

基础样式：
- ul 的样式移除了默认的列表样式、内边距和外边距。
- li 的样式添加了一些内边距。
伪元素 ::after：
- 使用 li:not(.special)::after 选择所有不具有 special 类的 <li> 元素，并为它们添加一个 ::after 伪元素。
- content: " ★" 添加一个星号符号。
- color: gold 设置星号的颜色为金色。

总结

通过将 :not 选择器与 ::after 伪元素结合使用，可以方便地对不符合特定条件的元素应用伪元素样式。这种方法在实际开发中非常灵活，适用于多种场景。