如何在溢出设置为滚动时使div：before可见？

Question

我正在尝试在ReactJS中构建一个控制台。但是，当我尝试插入控制台顶部栏时，我在psuedo元素之前使用了div'Terminal'。但是我希望div是溢出滚动。当div'Terminal'设置为overflow：scroll时，psuedoelement不可见。如何使Terminal :: before可见。

这是该应用程序的Css和JS代码；

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      commandHistory:[],
      value:'',
      answer:'',

    }
    this.handleChange = this.handleChange.bind(this);
    this.keyPress = this.keyPress.bind(this);
  }
  handleChange(e) {
      this.setState({
        value: e.target.value
      });
  }

  keyPress(e){
    if(e.keyCode === 13){
        var inputelement=e.target.value;
        if(inputelement[0]=='s' || inputelement[1]=='i' || inputelement[2]=='n'){
          console.log('yes');
        }
        else if(inputelement[0]=='c' || inputelement[1]=='o' || inputelement[2]=='s'){
          console.log('yes');
        }
        else if(inputelement[0]=='t' || inputelement[1]=='a' || inputelement[2]=='n'){
          console.log('yes');
        }
        console.log(e.target.value);
        var newArray = this.state.commandHistory;
        newArray.push(e.target.value);
        //console.log(newArray);
        this.setState({
          commandHistory:newArray,
          value:''
        });

        var terminalOutput=document.getElementById('terminalOutput');
        var element = document.createElement("div");
        element.appendChild(document.createTextNode('>>> '+e.target.value));
        var breakStatement= document.createElement("br");
        element.appendChild(breakStatement);
        try{
          var answer=eval(e.target.value);
        }
        catch(e){
          answer=inputelement+": Command not found"
        }
        console.log(answer);
        element.appendChild(document.createTextNode( answer ));
        terminalOutput.append(element);
    }
  }
  render() {
    return (



        <div className="Terminal">

          <div className="controls">
            <span className="red"></span><span className="yellow"></span><span className="green"></span><span>root@user:~ </span>
          </div>
          <div className="Terminal-machine">
            <div className="Input-Terminal">
              <span className="machine-name">root@user:~ calc<br/>
              &nbsp;Type "help","12+34", "(12+34)*76" for more information</span>
              <div id="terminalOutput"></div>&nbsp;>>> <input value={this.state.value} onKeyDown={this.keyPress} onChange={this.handleChange}  id="terminalInput" ></input>
            </div>
          </div>
        </div>



    );
  }
}


export default App;

body {
  background-color: #47CBA4;
  margin: 0;
  color:white;
  padding: 0;
  font-family: cursor, courier;

}

.Terminal{
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #3B4350;
  top:50%;
  width: 650px;
  height: 350px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.25), 0 10px 30px rgba(0,0,0,0.22);

}

.Terminal::before{
  text-align: center;
  content: '';
  background: linear-gradient(#4C505D, #3B4350);
  width: inherit;
  height:40px;
  position: absolute;
  top:-40px;
  border-radius: 10px 10px 0 0;
  border-bottom:2px solid #474A59;
  z-index: 1;
}
.controls span{
  cursor: pointer;
  display: inline-block;
  width:15px;
  height: 15px;
  border-radius: 50%;
  margin-left: 10px;
  z-index: 1;
  position: relative;
  top:-25px;

}

.red{
  background-color: #D94D53;
}
.red:hover{
  background-color: #ce495c ;
}
.yellow{
  background-color: #EBBC58;
}
.yellow:hover{
  background-color: #dfb360;
}
.green{
  background-color: #61CA82;
}
.green:hover{
  background-color: #57b68e;
}

input#terminalInput {
  color: white;
  font-family: cursor, courier;
  border: none;
  outline: none;
  font-size: 16px;
  background: none;
  width: 70%;
}
.machine-name{
  color:white;
  padding:10px;
  position: relative;
}
input#terminalInput::-ms-clear {
  display: none;
}
#terminalOutput{
  margin-left: 10px;
  display: block;

}