CSS拿到html标签中的文字

 

html

<div
              data-attr={title}
              className={`titleBox`}
              key={`titleBox${index}`}
              style={{ width, ...style }}
            >
              {title}
            </div>

css

 .titleBox {
      width: 100%;
      text-align: center;
      font-family: PingFangSC-Semibold;
      font-size: 44px;
      // color: #abd1e4;
      color: #fff;
      letter-spacing: 0;
      text-shadow: 0 3px 0 #58C7FF;
     
      
    }
    .titleBox::before {
      content: attr(data-attr);
      position: absolute;
      z-index: 10;
      background-image:-webkit-linear-gradient(bottom,#2285E3,#FFF); 
      -webkit-background-clip:text; 
      -webkit-text-fill-color:transparent; 
      // 去除继承父级样式
      text-shadow: none;
    }