<section>
<h2>
<span>This is <s>fxxkin</s></span>
Amazing Message Layout<br />
Powered by MonsterCSS
</h2>
</section>
*{
box-sizing: border-box;
font-family: 'Arial','ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
margin: 0;
padding: 0;
}
section{
align-items: center;
background: #333;
color: #fff;
display: flex;
height: 100%;
justify-content: center;
position: fixed;
width: 100vw;
}
section::before,
section::after{
background: tomato;
content: "";
display: inline-block;
height: 100%;
position: fixed;
width: 1px;
}
section::before{
left: 25%;
}
section::after{
right: 25%;
}
/* ここから下でspan以外のLayoutで折り返したテキストの両端が赤線にぴったり沿うようにするには? */
h2{
font-size: 4vw;
}
span{
display: block;
font-size: .5em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.