为什么我的CSS中的::before在React中不起作用？

Question

这是 React Js 文件： `从“反应”导入反应； 导入“./body-section.css”； 从“../etc/Image-robot.jpg”导入背景；

const Body = () => {
   return (
    <div className="body">      
        <div 
            className="bdy-socials-section">
            <img 
            src={background}
            id="bg-img">
            </img>
        </div>
     </div>
    )
}

export default Body;`


The CSS File
`.bdy-socials-section {

    width: 70vw;
-webkit-transition: all ease 1s;
   }

 .bdy-socials-section > img {
 width: 55vw;
height: 80vh;
transform: SkewY(5deg);
position: relative;
left: 50px;
}

.bdy-socials-section > img::before {
content: "";
display: block;
 }`

不幸的是，我在 Chrome 浏览器中没有看到任何视觉变化

我实际上已经走进了死胡同：<

Answer 1

// Body.jsx
function App() {
  return (
    <div className="body">
      <div
        className="bdy-socials-section">
        <div className='img-container'>
          <img
            src='https://images.pexels.com/photos/12825195/pexels-photo-12825195.png?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
            id="bg-img"
          />
        </div>
      </div>
    </div>
  )
}

export default App

/* Body.css */
.bdy-socials-section {
    width: 70vw;
    transition: all ease 1s;
    -webkit-transition: all ease 1s;
}

.bdy-socials-section>.img-container {
    width: 100%;
    height: 100%;
    position: relative;
    left: 50px;
}

.bdy-socials-section>.img-container>img {
    width: 55vw;
    height: 80vh;
    transform: SkewY(5deg);
}

.bdy-socials-section>.img-container::before {
    content: "";
    display: block;
    transform: SkewY(5deg);
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: red;
    z-index: 2;
}