纯html/css只能做静态续费提醒卡，如固定文案“会员将于2025-06-30到期”；动态倒计时（如“还剩3天”）必须依赖js或服务端计算，因html无时间处理能力，css伪元素也无法注入动态内容。
怎么用 HTML + CSS 做一个不依赖 JS 的续费提醒卡
纯 HTML/CSS 能做静态提醒卡，但「自动判断是否临近续费」必须靠 JS 或服务端。所谓“HTML 教程”里藏 JS 逻辑，是常见误导点。
如果你只需要固定文案的提示（比如“您的会员将于 2025-06-30 到期，请及时续费”），那 <div> + <code>class 就够了；如果要根据当前日期动态显示“还剩 3 天”，就必须加 JS —— HTML 本身没有时间计算能力。
- 静态卡适合邮件模板、CMS 页面片段、或服务端渲染后已知到期日的场景
- 别在
<style></style>里写媒体查询以外的“逻辑”，CSS 不认识new Date() - 用
data-expiry="2025-06-30"这类自定义属性存日期，方便后续 JS 接入，也利于语义化
为什么 time 标签不适合做续费倒计时
<time></time> 只是语义化容器，浏览器不会自动更新它，也不会触发样式变化。写成 <time datetime="2025-06-30">6月30日</time>，只是告诉屏幕阅读器“这是个时间”，对用户看到的“还剩 X 天”毫无帮助。
- 它不支持相对时间表达（如“2天后”），
datetime属性只接受绝对 ISO 格式 - 想靠 CSS 的
::before注入动态文本？不行 —— 伪元素无法读取 JS 计算结果，也不能解析datetime值 - 真要用语义化时间，就老实用
<time></time>包住服务端渲染好的最终文案，例如<time datetime="2025-06-30">还剩 3 天</time>
localStorage 不能替代服务端续费状态校验
有人把到期时间存在 localStorage，再用 JS 算剩余天数——这看起来能“动起来”，但极其危险。
立即学习“前端免费学习笔记（深入）”；
- 用户可手动修改
localStorage，绕过付费逻辑 - 多设备不同步：手机续费了，电脑上还是旧时间
- 清除缓存即失效，下次打开直接显示“已过期”，哪怕实际没过期
- 真正可靠的判断必须来自服务端 API 返回的
expires_at字段，前端只负责展示
最简可用的 HTML 提醒卡结构（带基础响应式）
下面这段可以直接复制进 HTML 文件，无需 JS 即可渲染，适配手机和桌面：
<div class="subscription-reminder" role="alert"> <strong>? 会员即将到期</strong> <p>您的高级权限将于 <time datetime="2025-06-30">2025年6月30日</time> 结束</p> <p><a href="/account/subscribe">立即续费</a>，保持全部功能</p> </div>
配套 CSS 建议用 max-width + padding 控制宽度，别用 width: 100vw —— 它会撑破手机视口，导致横向滚动。
容易被忽略的是 role="alert"：它让屏幕阅读器一进入页面就播报提醒，对无障碍很重要，但很多“教程”直接漏掉。
