完全可行，但只能模拟静态日历图标外观，无法实现日期渲染、交互或动态更新，因伪元素无dom节点、不支持计数器递增、事件绑定及grid布局。
用 ::before 和 ::after 模拟日历图标的结构是否可行
完全可行，但必须放弃“真实日期渲染”这个念头。CSS伪元素只能生成静态装饰性内容，不能读取或计算日期，更无法响应点击或动态更新。你看到的所谓“CSS日历图标”，本质是用边框、圆角、阴影和定位拼出一个视觉上像日历的图形，比如带方格框的矩形 + 右上角小圆点（代表“今天”）+ 中间几条横线（模拟日期行）。
实操建议：
- 主容器用
position: relative，方便伪元素绝对定位 -
::before画外框：设border+border-radius，宽度高度固定（如24px） -
::after画右上角圆点：content: ""+width/height: 4px+border-radius: 50%+top: 2px; right: 2px - 避免用伪元素画“日期数字”——
content只支持字符串字面量，写死"1"就永远是 1 号
为什么不能用 counter-increment 自动生成日期格子
因为 counter-increment 依赖真实 DOM 元素触发计数，而伪元素不是可遍历的节点，无法被 :nth-child 或 JavaScript 选中，也不能绑定事件或参与文档流布局计算。试图在 ::before 里用 content: counter(date) 并设置 counter-reset，结果只会是空白或 0。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 浏览器开发者工具里能看到伪元素 DOM 节点，但
getComputedStyle(el, '::before').content返回"none"或非法值 - 用
counter-reset: date 1后，content: counter(date)显示为1，但后续无法递增——没有真实元素调用counter-increment - 想用 CSS Grid 在伪元素内布局“7×5 的日期格”，实际会失败：伪元素不支持
display: grid子项嵌套
替代方案：用单个 <span></span> + 纯 CSS 实现可维护的日历图标
把结构控制权交还给 HTML，CSS 只负责样式。一个轻量、可复用、不污染语义的写法是：
<span class="calendar-icon" aria-hidden="true"></span>
然后用 CSS 定义其伪元素和尺寸，同时预留 font-size 和 color 接口供主题切换：
- 图标大小由
font-size控制，内部所有width/height用em单位，缩放时比例不变 - 边框颜色用
currentColor，继承父级文字色，无需额外配色变量 - 若需支持暗色模式，用
@media (prefers-color-scheme: dark)覆盖background和color即可 - 绝对不要给该
<span></span>设display: block或影响行高的属性，避免破坏内联上下文
哪些场景下纯 CSS 日历图标会翻车
一旦需求超出“静态装饰”的边界，立刻失效。典型翻车点：
- 需要显示当前日期（如“2024-06-12”）——CSS 无运行时能力，必须后端注入或 JS 渲染
- 点击展开日历面板——伪元素无法绑定
click事件，且不可聚焦，无障碍支持归零 - 适配高 DPI 屏幕时模糊——用
px写死尺寸的边框/圆点，在 2x 屏上发虚；应改用rem或 SVG - IE11 兼容需求——
::before/::after在 IE 中对inline元素的支持不稳定，content可能不渲染
真正要做的不是“怎么让 CSS 更像日历”，而是明确：这个图标是否只用于视觉提示？如果是，就别碰日期逻辑；如果要交互或动态内容，从一开始就把结构交给 HTML + JS，CSS 只管皮肤。
