两个伪类元素::before其中一个失效

Question

代码地址（资源文件在代码上一级目录）
https://gitee.com/poplink_itd...

这是代码运行出来的部分

对于右侧的气泡制作，我先是定义气泡的本身.QQ-blockquote:before
然后通过改变class来改变气泡的位置，比如.QQ-cell.end .QQ-blockquote::before
从图里来看，.QQ-cell.end已经起作用了，但是问题在下一张图

从上面这张图可以看到，只有.QQ-blockquote:before起了作用，但是改变气泡位置的.QQ-cell.start .QQ-blockquote::before这部分css代码是没有起到作用的（实际代码中start和end的css代码是一样的，理论上来说这里的气泡应该会出现在右上角），这个伪类失效的原因是什么？（代码在链接HTML文件的334-380之间）

/* 气泡制作 */
    .QQ-blockquote:before {
      /* right 比 width 少 1px 是为了避免边缘的问题 */
      content: "";
      width: 7px;
      height: 9px;
      border-color: #1fbafc;
      background: #1fbafc;
      border-bottom-right-radius: 7px 9px;
      display: block;
    }
    .QQ-blockquote:after {
      content: "";
      width: 7px;
      height: 2px;
      background: #eaedf4;
      border-bottom-right-radius: 7px 2px;
      display: block;
    }

    /* 对话定位 */
    .QQ-cell.end .QQ-blockquote::after {
      position: absolute;
      z-index: 10;
      top: 8px;
      right: -6px;
    }
    .QQ-cell.end .QQ-blockquote::before {
      position: absolute;
      z-index: 10;
      top: 8px;
      right: -6px;
    }

    /* 对话另一边 */
    .QQ-cell.start .QQ-blockquot::before {
      position: absolute;
      z-index: 10;
      top: 8px;
      right: -6px;
    }
    .QQ-cell.start .QQ-blockquot::after {
      position: absolute;
      z-index: 10;
      top: 8px;
      right: -6px;
    }

Answer 1

单词写错了