定位一个 :before 选择器

Question

添加 :before 选择器时，在这种情况下，我试图插入 Phone 图标以显示在 .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;
}

截图： Current position of the Pseudo element

Answer 1

给 h2 position: 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;
}

根据需要向左/上调整

定位一个 :before 选择器

Positioning a :before selector

css

icons

pseudo-element