Seçici: a seçilmeden önce

Question

:before seçiciyi eklerken, bu senaryoda, .front-page-contact div'in üstünde görünecek bir Telefon Simgesi yerleştirmeye çalışıyorum. İdeal olarak, .front-page-contact div içindeki metnin üzerinde ortalanmış olur.

Yukarıda bahsi geçen sonuca ulaşmak için bu seçiciyi nasıl konumlandırabilirim?

.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; 
} 

Ekran Görüntüsü:

Answer 1

sonra sözde eleman sayfasına değil h2 kesinlikle kendi kendine yerini alır H2 position: relative ver. İşaretlemeyi görmeden daha fazlasını söylemek zor.

DÜZENLEME:

Değişim bunun için:

.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; 
} 

gerektiği sol/üst ayarlayın

ben elemanın ne zaman pozisyonunu göstermek için daha fazla işaretleme ve daha iyi bir ekran görüntüsü ekledik