如何通过data属性设置CSS::before伪元素的图片源？

我想给一批客户评价的头像设置伪元素，尝试通过data属性传递图片URL到CSS，但遇到了问题：

PHP / HTML 代码 #

$image_src = wp_get_attachment_image_src($image)[0];

echo '
    <div class="testimonial fp-card content-section content-section--has-center-image" data-image="' . $image_src . '">
       <div class="testimonial__text">' . $text . '</div>
    </div>';

SCSS 代码 #

.testimonial {
  &::before {
    content: attr(data-image); // 这里只会输出URL字符串，无法作为图片显示
    position: absolute;
    top: -0.5rem;
    right: 50%;
    transform: translateX(-50%);
    // 其他样式
  }
}

我试过content: url(attr(data-image))但没有效果，有没有办法把data-image里的URL作为有效图片地址传给::before？

可行的解决方法 #

方法1：使用CSS自定义属性（推荐，兼容性更好）

修改PHP输出，将图片URL封装为CSS变量嵌入元素的style属性：

$image_src = wp_get_attachment_image_src($image)[0];

echo '
    <div class="testimonial fp-card content-section content-section--has-center-image" style="--avatar-url: url(\'' . esc_url($image_src) . '\')">
       <div class="testimonial__text">' . $text . '</div>
    </div>';

然后在SCSS中调用这个变量作为背景图：

.testimonial {
  position: relative; // 伪元素需要相对定位的父容器
  &::before {
    content: ''; // 伪元素必须设置content才能渲染
    position: absolute;
    top: -0.5rem;
    right: 50%;
    transform: translateX(-50%);
    width: 60px; // 根据需求设置头像尺寸
    height: 60px;
    background-image: var(--avatar-url);
    background-size: cover; // 确保图片填满容器
    border-radius: 50%; // 可选：设置圆形头像
    // 其他样式
  }
}

方法2：利用attr()结合background-image（注意兼容性）

如果坚持使用data属性，可以通过指定attr()的类型为url，直接将其作为背景图源：

.testimonial {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: -0.5rem;
    right: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background-image: attr(data-image url); // 声明attr值为URL类型
    background-size: cover;
    // 其他样式
  }
}

注：这种方式在部分旧版浏览器中可能不支持，优先推荐方法1。

为什么content: url(attr(data-image))无效？ #

CSS的url()函数目前不支持嵌套attr()，attr()直接作为content值时只会被解析为纯文本字符串，无法被url()识别为有效的图片地址。

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