css - 与滚动文本保持不同的行

Question

<style>
.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;
</style>
 <div class=bigtext>
  <h1>Title Text</h1>
 </div>
<style>
.pre {
 height:50px;
 width: 500px;
 overflow: hidden;
 position: relative;
 margin: 0 auto;
 color: #D7A1A1;
 font-family: 'Arvo', serif;
 font-size: 3vh;
 fomt-style: italic;
 text-align: center;
 align-items: center;
 padding: 30px;
 display: inline-block;
 text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
</style>
 <div class="pre">
   <pre>|<marquee scrolldelay="30" onmouseover="this.stop()" onmouseout="this.start()">
   <h3>scrolling text</h3>
   </marquee>|</pre>
 </div>
</body> 

我想为 |在 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>