如何在CSS的content属性中读取指定meta标签的content属性值

错误原因说明 #

• attr() 函数仅支持读取当前绑定样式的元素自身的属性值，无法跨元素读取<meta>这类其他DOM节点的属性，所以第一种写法不生效。
• string() 函数是CSS Paged Media模块的特性，仅能配合string-set属性在分页媒体（如打印、PDF导出）场景下使用，无法在普通网页流的样式中直接读取任意元素内容，所以第二种写法也不生效。

可行实现方案 #

方案1：仅分页媒体场景下的纯CSS实现 #

如果你的需求是在打印、PDF导出这类分页场景下读取meta内容，可以用以下写法：

/* 先把meta的content属性值存入自定义字符串变量 */
meta[name="username"] {
  string-set: username attr(content);
}

/* 在需要使用的地方通过string()读取变量 */
.user-name::before {
  content: string(username);
}

注意：该方案仅兼容分页媒体场景，普通网页浏览时不会生效。

方案2：全场景通用实现（推荐） #

普通网页场景下需要搭配少量JS读取meta内容，再注入到CSS变量中供content属性使用：

1. 先写CSS，预留自定义变量读取位：

.user-name::before {
  content: var(--username);
}

2. 加入JS代码把meta内容同步到CSS变量：

const username = document.querySelector('meta[name="username"]').content;
document.documentElement.style.setProperty('--username', `"${username}"`);

注意：如果meta内容里包含特殊字符，需要做转义处理避免语法问题。

内容的提问来源于stack exchange，提问作者lisovskiy329