CODEWITHSUNDEEP
cssiconspseudo-element
Tom25
Tom25

Reputation: 135

Positioning a :before selector

When adding a :before selector, in this scenario I am trying to insert a Phone Icon to appear above the .front-page-contact div. Ideally, so it would be centered above the text in the .front-page-contact div.

How could I go about positioning this selector to achieve the result mentioned above?

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

Screenshot: Current position of the Pseudo element

Upvotes: 3

Views: 1612

Answers (1)

P. Janowski
P. Janowski

Reputation: 306

Give h2 position: relative then the pseudo element will position itself absolutely to the h2 not to the page. Its hard to say more without seeing the markup.

EDIT:

Change it to:

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

Adjust left / top as necessary

Upvotes: 6

Related Questions