CMS与Codepen间.title::before边框样式不一致问题排查

先查这几个关键地方：

• 样式优先级被覆盖：CMS自带的全局样式可能用了更具体的选择器，把你的.title::before样式冲掉了
• 盒模型影响：如果全局开了box-sizing: border-box，伪元素的尺寸计算可能出问题
• 层级被遮挡：伪元素可能被父容器或者其他元素压在下面了
• CSS变量未定义：原代码里的var(--primary-color)要是CMS没定义，虽说不直接影响气泡，但可能引发连锁样式问题

试试这些修复办法：

1. 强化选择器优先级 #

把气泡的CSS选择器改得更具体，确保能压过全局样式：

.timeline .timeline-card .timeline-info .title::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #6eb43f;
    border-radius: 999px;
    border: 8px solid #b3d597;
    z-index: 10; /* 确保气泡在最上层 */
}

要是还不行，临时加个!important在background后面，确认是不是优先级的问题，确认后再去掉就行。

2. 确保父元素定位正确 #

.title必须是相对定位，不然伪元素的绝对定位会跑偏，强制设置：

.timeline .timeline-card .timeline-info .title {
    position: relative;
}

3. 用开发者工具抓问题 #

打开浏览器控制台，选中.title元素，查看::before伪元素的样式面板：

• 看content是不是空的，要是空的肯定显示不出来
• 看哪些属性被划掉了，划掉的就是被全局样式覆盖的
• 检查有没有全局规则写了*::before { display: none; }或者content: none;这类限制

4. 补全缺失的CSS变量（可选） #

原代码里的var(--primary-color)要是CMS没定义，给它加个默认值：

.timeline {
    background: var(--primary-color, #e8f5e9); /* 换成你需要的背景色 */
    margin: 20px auto;
    padding: 20px;
}

改完刷新页面，再用控制台看伪元素的样式，确认width、height、background这些属性都生效了就行。

内容的提问来源于stack exchange，提问作者Wesley Howard