在React中如何用useRef选择CSS伪元素并修改content属性

伪元素是CSS生成的虚拟节点，不属于真实DOM元素，因此无法通过useRef直接选中或修改它的样式。以下是两种实用的实现方案：

方案一：使用CSS自定义属性（变量） #

通过CSS变量建立伪元素与DOM元素的关联，再借助useRef修改变量值实现动态更新。

1. 调整CSS代码 #

将伪元素的content改为引用自定义变量，同时设置默认值：

.nav__icon-wrapper {
  /* 原有样式 */
}

.nav__icon-wrapper::after {
  content: var(--after-content, '5'); /* 变量默认值为'5' */
  /* 原有其他样式 */
}

2. React组件中动态修改 #

通过useRef获取目标元素，使用style.setProperty修改CSS变量：

import { useRef, useEffect } from 'react';

function NavComponent() {
  const iconRef = useRef(null);

  useEffect(() => {
    // 示例：将content改为'10'
    if (iconRef.current) {
      // 注意：content需要字符串值，所以要给内容加引号
      iconRef.current.style.setProperty('--after-content', "'10'");
    }
  }, []);

  return (
    <div className="nav__icon-wrapper" ref={iconRef}>
      {/* 组件内容 */}
    </div>
  );
}

方案二：使用data属性结合CSS #

利用HTML的data-*属性存储动态值，再通过CSS的attr()函数读取该值作为伪元素的content。

1. 调整CSS代码 #

让伪元素的content读取元素的data-after-content属性值：

.nav__icon-wrapper {
  /* 原有样式 */
}

.nav__icon-wrapper::after {
  content: attr(data-after-content);
  /* 原有其他样式 */
}

2. React组件中动态修改 #

通过useRef获取元素后，直接修改其dataset属性或使用setAttribute更新data属性：

import { useRef, useEffect } from 'react';

function NavComponent() {
  const iconRef = useRef(null);

  useEffect(() => {
    // 示例：将content改为'10'
    if (iconRef.current) {
      // 方法1：修改dataset属性
      iconRef.current.dataset.afterContent = '10';
      // 方法2：使用setAttribute
      // iconRef.current.setAttribute('data-after-content', '10');
    }
  }, []);

  return (
    <div className="nav__icon-wrapper" ref={iconRef} data-after-content="5">
      {/* 组件内容 */}
    </div>
  );
}

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