伪元素画圆点需设content: ""、display: block、宽高相等及border-radius: 50%；连线用::after配合height与top定位，注意父容器定位上下文和IE11兼容性。
伪元素 ::before 和 ::after 怎么画圆点
圆点本质是块级伪元素 + 固定宽高 + border-radius: 50%，不是用 content 插字符。常见错误是只设 content: "" 却忘了给尺寸和背景色，结果啥也看不到。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
::before通常负责圆点，::after负责连线（或反过来），取决于 DOM 流向和定位策略 - 必须显式设置
display: block（默认 inline，不认宽高） - 用
top/left定位时，父元素得是position: relative，否则会相对于视口偏移 - 圆点大小建议用
em或rem，避免在缩放或响应式下失真
li::before {
content: "";
display: block;
width: 1.2em;
height: 1.2em;
background: #3b82f6;
border-radius: 50%;
position: absolute;
top: 0.5em;
left: -1.8em;
}用 ::after 绘制垂直连线为什么总断开
连线断开的主因是父容器高度塌陷或伪元素未撑开空间。CSS 伪元素默认不参与文档流，::after 若只画一条竖线，又没设置高度或 top/bottom 约束，浏览器无法自动推算长度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 连线推荐用
height+top控制起始位置，而不是依赖bottom—— 后者在多行内容下极易错位 - 若时间轴项高度不固定，改用
inset-block-start/inset-block-end（兼容性需查 CanIUse）更可靠 - 为防被上层内容遮挡，加
z-index: 1，但注意父元素得有定位（position: relative）才能生效 - 别用
border-left代替伪元素连线：它会随文字换行错位，且无法单独控制端点样式
li::after {
content: "";
position: absolute;
left: -0.5em;
top: 2.2em;
height: calc(100% - 2.2em);
width: 2px;
background: #d1d5db;
z-index: 1;
}IE11 下 ::before 圆点不显示的兼容处理
IE11 对伪元素 + position: absolute + content: "" 的渲染有边界条件：如果父元素没有明确高度、或触发了 hasLayout 失败，伪元素可能被忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给父
<li>加min-height: 1px或zoom: 1（IE 专属 hack）强制触发 layout - 避免在 IE 中使用
inset相关属性，全部回退到top/left -
border-radius: 50%在 IE11 中对非正方形元素可能略椭，确保width === height - 若项目必须支持 IE11，把圆点改用真实 DOM 元素（如
<span class="timeline-dot"></span>）更稳妥
响应式下时间轴连线错位怎么微调
错位根源常是固定像素值（如 left: -1.8em）在不同字体缩放或断点下失效，而非媒体查询没写全。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 圆点横向偏移统一用
em，基于父元素font-size计算，比px更稳定 - 连线高度慎用
100%：当父元素包含多行文本时，100%是指内容高度，不是视觉区块高度；优先用calc()扣除上下间距 - 移动端可考虑改用 flex 布局替代绝对定位，伪元素只负责装饰，逻辑交由
flex-direction: column排列 - 用
@supports (position: sticky)区分新旧引擎，避免在老浏览器里叠加无效声明
圆点和连线看着简单，但真正卡住人的永远是父容器的定位上下文、伪元素的渲染触发条件、以及不同浏览器对「空 content」的宽容度差异。动手前先 inspect 一下 computed styles 里 display 和 position 是否如预期，比猜半天快得多。
