Double quotation heading

by hondana

HTML

<div style="margin-top:30px"><!-- ブログ埋め込みの見栄え調整用  -->
<h2 class="misson-midashi1">ダブルクォーテーション</h2>
</div>

CSS

.misson-midashi1 {
position: relative;
padding-bottom: 1rem;
width: 60%;
text-align:center;
}
.misson-midashi1:before,
.misson-midashi1:after{
position: absolute;
font-size: 4em;
opacity: .3;
font-family: serif;
content: '“';
}
.misson-midashi1:before{
top: -30px;
left:0;
}
.misson-midashi1:after{
bottom: 0;
right: 0;
transform: rotate(180deg);
}

@media screen and (max-width: 768px) {
    .misson-midashi1:before{
        top: -50px;
        left:0;
    }
    .misson-midashi1:after{
        bottom: -30px;
        right: 0;
    }
}
@media screen and (max-width: 500px) {
    .misson-midashi1 {
        width: 80%;
    }
}

@media screen and (min-width: 992px) {
    .misson-midashi1 {
        width: 45%;
    }
}