如何让CSS滤镜不作用于嵌套blockquote的:after伪元素？

方法一：用CSS变量替代filter控制边框颜色（推荐） #

放弃使用filter改变嵌套边框颜色，改用CSS变量动态计算色相值，仅作用于需要变色的:before伪元素，完全不影响:after页脚样式：

/* 基础布局样式 */
blockquote {
  position: relative;
  padding-left: 1.5rem;
  margin: 1rem 0;
  --hue: 0deg; /* 初始色相基准值 */
}

/* 左侧彩色边框 */
blockquote:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: hsl(var(--hue), 70%, 50%); /* 用变量控制边框色相 */
}

/* 来源页脚 - 固定蓝色不受影响 */
blockquote:after {
  content: attr(data-author) ' on ' attr(data-date);
  display: block;
  margin-top: 0.5rem;
  color: #007bff;
  font-size: 0.9rem;
}

/* 嵌套时递增色相值，实现颜色循环 */
blockquote blockquote {
  --hue: calc(var(--hue) + 307deg);
}

每嵌套一层，左侧边框的色相就会自动偏移307度，而:after的蓝色样式完全不受干扰，从根源上避免了滤镜的副作用。

方法二：分离滤镜作用范围（兼容原有filter方案） #

如果必须保留filter实现颜色变化，可通过结构拆分，让滤镜仅作用于需要变色的区域：

<blockquote data-author="dennis" data-date="2024-05-20">
  <div class="quote-inner">
    <!-- 引用内容 -->
    <blockquote data-author="alice" data-date="2024-05-19">
      <div class="quote-inner">
        <!-- 嵌套引用内容 -->
      </div>
    </blockquote>
  </div>
</blockquote>

blockquote {
  position: relative;
  margin: 1rem 0;
}

/* 仅给内容容器添加滤镜 */
.quote-inner {
  position: relative;
  padding-left: 1.5rem;
  filter: hue-rotate(307deg) saturate(2.5);
}

.quote-inner:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #007bff; /* 初始颜色，滤镜会修改它 */
}

/* :after伪元素挂载在blockquote上，脱离滤镜作用范围 */
blockquote:after {
  content: attr(data-author) ' on ' attr(data-date);
  display: block;
  margin-top: 0.5rem;
  color: #007bff;
  font-size: 0.9rem;
}

/* 嵌套时叠加滤镜参数 */
blockquote blockquote .quote-inner {
  filter: hue-rotate(calc(307deg * 2)) saturate(2.5);
}

通过结构分离，让滤镜只影响边框和引用内容，页脚伪元素完全不受滤镜干扰，保持原本的蓝色。

内容的提问来源于stack exchange，提问作者Dennis Hackethal