Div：beforeと：after反応しないコンテンツ

Question

私はその中に挨拶のdivを持つ必要があるヘッダーがあります。そして、そのdivは：beforeと：afterのスタイルにする必要があります。 HTMLで追加することはできません。しかし、ウィンドウのサイズを変更すると、すべてがうんざりしてしまいます。そして、フォントサイズを変更することなく、起こらないようにする方法を知りません。

誰かが私ができることがあるかどうかを見て、教えてもらえますか？ありがとうございました！

.header { 
 
    background-image: url('http://lorempixel.com/1300/800/'); 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    min-height: 765px; 
 
} 
 

 
.title { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateY(-50%) translateX(-50%); 
 
    padding: 0px 20px 7px 20px; 
 
    border: 1px solid #fff; 
 
    outline: 2px solid #000; 
 
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .375); 
 
    font-size: 3em; 
 
    font-weight: 700; 
 
    color: #fff; 
 
    line-height: 1.3; 
 
} 
 

 
.title:before { 
 
    font-family: FontAwesome; 
 
    content: "\f051"; 
 
    font-size: 1.5em; 
 
    vertical-align: bottom; 
 
} 
 

 
.title:after { 
 
    content: "Hello hello"; 
 
    position: absolute; 
 
    font-size: 17px; 
 
    font-weight: 400; 
 
    text-transform: uppercase; 
 
    display: block; 
 
    top: 15px; 
 
    left: 75px; 
 
    line-height: 1; 
 
}

<div class="header"> 
 
    <div class="title"> 
 
    Hello 
 
    </div> 
 
</div>

Answer 1

あなたは、このコードを試してみて、絶対位置を削除：

.header { 
 
    background-image: url('http://lorempixel.com/1300/800/'); 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    min-height: 765px; 
 
    text-align:center; 
 
} 
 

 
.title { 
 
    position: relative; 
 
    display:inline-block; 
 
    margin-top:15%; 
 
    padding: 0px 20px 7px 20px; 
 
    border: 1px solid #fff; 
 
    outline: 2px solid #000; 
 
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .375); 
 
    font-size: 3em; 
 
    font-weight: 700; 
 
    color: #fff; 
 
    line-height: 1.3; 
 
} 
 

 
.title:before { 
 
    font-family: FontAwesome; 
 
    content: "\f051"; 
 
    font-size: 1.5em; 
 
    vertical-align: bottom; 
 
} 
 

 
.title:after { 
 
    content: "Hello hello"; 
 
    position: absolute; 
 
    font-size: 17px; 
 
    font-weight: 400; 
 
    text-transform: uppercase; 
 
    display: block; 
 
    top: 15px; 
 
    left: 75px; 
 
    line-height: 1; 
 
}

<div class="header"> 
 
    <div class="title"> 
 
    Hello 
 
    </div> 
 
</div>