页面bulletin有序列表、无需列表不显示圆点的问题 - Wq

今天发现这个博客页面内容如果有bulletin，显示是有问题的。无序列表，没有前面的小圆点；有序列表，数字和内容之间也没有小圆点。

其实问题之前一直就存在，但没有太留意，今天看到了越看越不顺眼，决定将其解决掉。

跟vscode的Copilot和DeepSeek对话了几轮，基本排查定位到了原因，经过几番调试，总算得到了想要的结果。

核心是css文件里的这一段代码，在Content后新增Unicode转义符content: "\2022"（\2022就是圆点的转义符），把圆点加上就OK了。

// List
ul {
  list-style: none;
  li {
    display: list-item;
    text-align: -webkit-match-parent;
  }
  li::before {
    content: "\2022";
    display: inline-block;
    top: -1px;
    width: 1.2em;
    position: relative;
    margin-left: -1.3em;
    font-weight: 700;
  }
}

ol {
  list-style: none;
  counter-reset: li;
  li {
    position: relative;
    counter-increment: li;
    padding-left: 1.6em; // 补偿伪元素宽度
    // text-indent: -1.6em; // 首行文本向左回拉

    &::before {
      content: counter(li) ".";
      position: absolute; // 绝对定位避免干扰文本流
      left: 0;           // 贴紧左侧
      width: 1.5em;
      text-align: right;
      font-weight: $bold-weight;
      font-size: $small-font-size;
    }
  }
}

另外，Chrome浏览器对于css文件的修改是不敏感的，总是采用先前缓存的文件。这就导致修改提交后，刷新页面，还是先前有问题的样子，得不到预期的效果。后来才发现是浏览器缓存的问题，删掉后，就会读取修改后的css文件。