Css 定位a：在选择器之前

添加

：在
选择器之前，在此场景中，我试图插入一个手机图标，显示在
首页联系人
div上方。理想情况下，它将位于
首页联系人
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;
}

截图：
给定h2
位置：relative
则伪元素将自身绝对定位到h2，而不是页面。如果没有看到加价，很难说得更多

编辑：

将其更改为：

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

根据需要调整left/top
我添加了更多标记和更好的屏幕截图，以便在向
h2
类添加
position:relative
时显示元素的位置。我还向伪元素添加了
position:relative
，它将图标定位在
h2
上方。但是，它扩展了
首页联系人的高度。WordPress主题有一个很好的例子：