如何通过CSS伪元素::before在打印页面时显示链接的URL？-css教程-PHP中文网

a::after在打印时默认不显示，是因为多数浏览器为避免干扰文档语义和浪费纸张，默认禁用伪元素content输出；必须在@media print中显式声明a[href]::after并正确设置content: " (" attr(href) ") "，且排除选择器、属性名、覆盖规则等错误。

如何通过css伪元素::before在打印页面时显示链接的url？

直接用 @media print + a[href]::after 即可，但必须注意 content 值的格式和浏览器对伪元素在打印上下文中的渲染限制。

为什么 `a::after` 在打印时默认不显示？

多数浏览器（Chrome、Edge、Firefox）默认会禁用所有伪元素的 content 输出，除非显式启用。这不是 bug，而是打印样式表的保守策略：避免干扰文档语义结构或浪费纸张。

伪元素内容不会出现在 DOM 中，打印引擎只看 CSS 渲染树，而它默认忽略未明确声明的 ::before/::after
display: none 或 visibility: hidden 会彻底屏蔽，但更常见的是没写 @media print 规则，导致样式根本没生效
部分旧版 Safari 对 attr(href) 在打印中支持不稳定，建议加 fallback

`@media print { a[href]::after }` 的正确写法

必须同时满足三个条件：选择器命中、content 合法、且不被其他规则覆盖。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

选择器要带 [href] 属性限定，否则空链接或锚点（#top）也会触发，输出无效括号
content 必须用 attr(href)，不能写成 attr("href")（引号非法）或 attr(data-href)（属性名错）
推荐加空格和括号包裹，提高可读性：content: " (" attr(href) ") "
如果链接是相对路径（如 /contact），打印时不会自动补全为完整 URL；需后端或 JS 预处理，CSS 无解

/* 正确示例 */
@media print {
  a[href]:not([href^="javascript:"]):not([href^="#"])::after {
    content: " (" attr(href) ") ";
    font-size: 0.8em;
    color: #666;
  }
}