使用content属性显示CSS自定义属性（也称为CSS变量）值的技巧主要涉及在CSS的::before或::after伪元素中利用content属性结合var()函数来展示这些变量的值。以下是一些具体的技巧和方法：
1. 直接在content属性中使用var()函数
这是最直接的方法，你可以在content属性中直接使用var()函数来插入CSS自定义属性的值。例如：
css
:root {
--primary-color: #007bff;
}
.button::before {
content: "Primary color is " var(--primary-color); /* 注意：这里的var()函数用法是错误的，因为content属性不支持直接插入颜色值 */
/* 正确的方式是使用attr()与data-*属性结合，或者通过其他方式间接显示颜色（如转换为可显示的文本或样式） */
}
/* 但由于content属性不能直接识别颜色值，上面的代码示例只是为了说明如何插入变量，实际上需要变通处理 */然而，需要注意的是，content属性通常用于插入字符串或URL等，并不直接支持颜色值或其他非字符串类型的CSS属性值。因此，对于颜色值，你可能需要将其转换为可显示的文本（如颜色名或十六进制代码），或者通过其他CSS属性（如background-color）来展示。
2. 使用attr()函数与data-*属性结合
如果要在content属性中显示与CSS自定义属性相关联的文本，一种方法是在HTML元素上使用data-*属性来存储该文本，然后通过attr()函数在CSS中引用它。虽然这种方法不直接显示CSS自定义属性的值，但它可以间接实现类似的效果。例如：
HTML:
html
<button class="button" data-color-name="Blue">Click me</button>CSS:
css
.button::before {
content: "Color: " attr(data-color-name);
}但如果你确实想要显示CSS自定义属性的颜色值，你可能需要在JavaScript中处理这个逻辑，将颜色值转换为可显示的文本，并通过data-*属性或其他方式将其应用到元素上。
3. 借助JavaScript动态设置content属性
对于更复杂的场景，你可以使用JavaScript来动态地读取CSS自定义属性的值，并将其设置为content属性的值。例如：
javascript
const button = document.querySelector('.button');
const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color');
button.style.setProperty('--custom-content', `"Color: ${primaryColor}"`);
// 然后，在CSS中使用var(--custom-content)在content属性中
.button::before {
content: var(--custom-content);
}但请注意，由于content属性的限制，你可能仍然需要将颜色值转换为可显示的文本格式。
4. 注意事项
content属性仅适用于::before和::after伪元素。content属性不能直接接受颜色值或其他非字符串类型的CSS属性值。- 当使用
var()函数时，请确保CSS自定义属性已经在文档的根元素（如:root）或其他适当的位置声明。 - 考虑到兼容性和浏览器支持，确保你的CSS代码在目标浏览器上能够正常工作。
通过这些技巧和方法，你可以灵活地在CSS的content属性中展示自定义属性的值，从而增强你的网页样式和交互效果。