How can I use CSS Pseudo-elements styling inside React JSX to pass variables?

You can use from styled-components:

import React from 'react';
import styled from 'styled-components';

const Div = styled.div`
&::before{
  position: absolute;
  content: "";
  background: #283593;
  height: 18px;
  width: 18px;
  top: 2.5rem;
  right: -0.7rem;
  z-index: -1;
  transform: rotate(45deg);
}
&::after{
  position: absolute;
  content: ${props => props.name};
  top: 11px;
  right: -14px;
  padding: 0.5rem;
  width: 11rem;
  background: #3949ab;
  color: white;
  text-align: center;
  box-shadow: 4px 4px 15px rgba(26, 35, 126, 0.2);
}

;

class App extends React.Component {
.
.
.
render(){
   return(
          <Div name=""></Div>
);
}
}