伪元素生成点状引导线时，::after 必须同时设置 letter-spacing 和 white-space: nowrap，否则点会被换行打断；content 用单个句点，配合 overflow: hidden、合理 font-size 及 flex: 1 加 min-width 防压缩，并注意基线对齐与 safari 兼容性。
伪元素生成点状引导线时，::after 的 letter-spacing 和 white-space 必须配对使用
常见错误是只设 letter-spacing: 2px 却没加 white-space: nowrap，导致点被换行打断，变成几行小点。点状引导线本质是用单个句点重复填充，靠字符间距撑开，所以必须锁定一行不折行。
实操建议：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
::after中固定content: "."，不要用多个点拼接（兼容性差、不易控制） - 必须同时设置
white-space: nowrap和overflow: hidden，否则内容溢出容器会破坏布局 -
font-size建议设为12px或14px，太小渲染模糊，太大易撑破容器 - 若父容器高度动态（如文字行高不一致），把
bottom改成top: 50%; transform: translateY(-50%)更稳
Flex 容器里用 flex: 1 撑开中间区域，但要注意 min-width 防止压缩过度
很多人为让中间点线占满剩余空间，直接写 .middle { flex: 1 }，结果在窄屏或长文本下，点线区域被压到看不见——因为 flex: 1 默认允许收缩到 0。
实操建议：
- 加上
min-width: 30px（或根据设计定最小宽度），避免点线消失 - 如果点线要严格对齐左右文本基线，给
.left和.right加align-self: flex-end或flex-end，而不是依赖默认对齐 - 不要在
.middle上设width，它会和flex: 1冲突；要用就改用flex-basis - 旧版 Safari（flex: 1 在某些嵌套场景下的计算，可降级为
flex: 1 1 0
时间轴类布局中，::before 绘制竖线时，position: absolute 的参照必须是 relative 父容器
直接给 .timeline-item 加 ::before 画圆点没问题，但想画贯穿整个时间轴的竖线时，常有人把 ::before 加在最外层容器上却忘了设 position: relative，结果竖线定位飘走。
实操建议：
- 外层容器（如
.timeline）必须有position: relative，否则absolute子元素按 body 定位 - 竖线高度用
height: 100%不可靠——如果容器没显式高度，它会塌为 0；稳妥做法是用inset: 0 0 0 8px+width: 2px - 圆点和竖线颜色保持一致，但圆点建议加
border（如2px solid #007cba），比纯背景色更抗缩放失真 - 移动端需注意竖线在高 DPR 屏幕上变虚，可加
transform: translateZ(0)强制硬件加速
伪元素配合 Flex 布局时，align-items 和 justify-content 的作用对象容易混淆
比如给单选按钮加 ::before 画圆点，开发者常在伪元素上猛调 top/left/transform，却忽略父容器没设 align-items: center，导致按钮整体在 Flex 行里“吊着”。
实操建议：
-
align-items控制的是 Flex 项目（即子元素）在交叉轴上的对齐，不是伪元素本身 - 伪元素的定位完全独立于 Flex，
transform: translate(-50%, -50%)要搭配position: absolute和top: 50%; left: 50%才生效 - 如果伪元素需要随父元素缩放（如响应式图标），优先用
aspect-ratio+width，别硬调height - 所有伪元素的
content值必须是非空字符串（哪怕只是" "），否则在部分浏览器中不渲染
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
