<pre> 紧贴与滚动文本不同的行

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>