Div與：之前和之後內容不響應

Question

我有一個標題，需要有一個問候格里面。並且該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>