ポジショニングa：セレクタの前に

Question

:beforeセレクタを追加する場合、このシナリオでは.front-page-contact divの上に表示する電話アイコンを挿入しようとしています。理想的には、それは.front-page-contact divのテキストの上に配置されます。

上記の結果を得るために、このセレクタを配置する方法を教えてください。

.front-page-contact .widget:nth-of-type(1) { 
    text-align: center; 
} 

.front-page-contact { 
    background-color: #00AFBE; 
    padding: 20px 0; 
} 

.front-page-contact h2 { 
    font-size: 26px; 
    color: #fff; 
    margin: 0; 
    position: relative; 
} 

.front-page-contact h2:before { 
    font-family: Ionicons; 
    content: "\f4b8"; 
    font-size: 40px; 
    background-color: tomato; 
    border-radius: 50%; 
    width: 40px; 
    height: 40px; 
    padding: 20px; 
    display: block; 
    position: relative; 
    line-height: 1em; 
    margin: 0 auto; 
} 

スクリーンショット：

Answer 1

その後、疑似要素がないページには絶対H2に自分自身を配置しますH2 position: relativeを与えます。マークアップを見ることなく、もっと言いにくいです。

EDIT：へ

変更を：

.front-page-contact h2:before { 
    font-family: Ionicons; 
    content: "\f4b8"; 
    font-size: 40px; 
    background-color: tomato; 
    border-radius: 50%; 
    width: 40px; 
    height: 40px; 
    padding: 20px; 
    display: block; 
    position: absolute; 
    line-height: 1em; 
    left: calc(50% - 40px); 
    top: -60px; 
}