<pre> цепляется за другую строку, чем прокрутка текста

Question

.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;

 
  Title Text
 

|
   scrolling text
   |

Я бы хотел за | в теге pre находиться в той же строке, что и текст прокрутки, чтобы показать вид границы, где текст исчезает. Что не работает? Вот пример. Представьте, что текст движется. 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>