<pre> clinging to a different line than scrolling text

Question

this.resize

I would like for the | in the pre tag to be in the same line as the scrolling text to show a sort of border where as to the text disappears. What isn't working? Here is an example. Imagine that the text is moving. https://i.gyazo.com/fab2dfd4f1518f8655438c7fe280a52b.png

Answer 1

您错过了结束div

.bigtext {
   color: #D7A1A1;
   font-family: 'Arvo', serif;
   font-size: 6vh;
   text-align: center;
   align-items: center;
   margin-top: 30vh;
   margin-bottom: 2vh;
   display: block;
   border-bottom-width: 3px;
   border-bottom-color: #D3D3D3;
   border-bottom-style: solid;
   padding-bottom: 1vh;
   text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
}
 .pre{
   height:50px;
   width: 500px;
   overflow: hidden;
   position: relative;
   margin: 0 auto;
   color: #D7A1A1;
   font-family: 'Arvo', serif;
   font-size: 3vh;
   font-style: italic;
   text-align: center;
   align-items: center;
   padding-top: 30px;
   padding-bottom: 30px;
   display: inline-block;
   text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
 }
 .pre:before{
 content: '|';
 position: absolute;
 left:0;
 top:35px;
 height: auto;
 width:2px;
 background:red;

 }
 .pre:after{
 content: '|';
 position: absolute;
 right:0;
 top:35px;
 height: auto;
 width:2px;
 background:red;

 }

<div class="bigtext">
  <h1>Title Text</h1>
  </div>
 <div class="pre">
   <marquee scrolldelay="30" onmouseover="this.stop()" onmouseout="this.start()">
   <h3>scrolling text</h3>
   </marquee>
 </div>