CODEWITHSUNDEEP
csspseudo-element
Paul
Paul

Reputation: 3368

:after content displaying over original element

The .back-btn servers as a background image of an arrow. I am wanting the :after content to display under the image. I am unsure what I am doing wrong. I have tried adding margin-top and position:relative to the :after element, but nothing seems to work. Does anyone see what I am doing wrong?

.back-btn {
    position: fixed;
    left: 2%;
    display: block;
    cursor: pointer;
    background-image: url("https://d30y9cdsu7xlg0.cloudfront.net/png/41-200.png");
    background-repeat: no-repeat;
    background-size: 35px 35px;
    height: 35px;
    width: 35px;
}
.back-btn:after {
    content: "Back";
    color: #303030;
    font-size: .8em;
    display: block;
}
<div class="back-btn"></div>

Upvotes: 0

Views: 56

Answers (2)

Pete
Pete

Reputation: 58442

Instead of giving .back-btn a height, change that height to padding top:

.back-btn {
    position: fixed;
    left: 2%;
    display: block;
    cursor: pointer;
    background-image: url("https://d30y9cdsu7xlg0.cloudfront.net/png/41-200.png");
    background-repeat: no-repeat;
    background-size: 35px 35px;
    padding-top: 35px;
    width: 35px;
    text-align:center; /* optional if you want to centre your text */
}
.back-btn:after {
    content: "Back";
    color: #303030;
    font-size: .8em;
    display: block;
}
<div class="back-btn"></div>

Upvotes: 1

LKG
LKG

Reputation: 4192

Try this

.back-btn:after {
    content: "Back";
    color: #303030;
    font-size: .8em;
    display: block;
    margin-top:35px;
}

update link of your code

Upvotes: 1

Related Questions