：内容显示在原始元素上之后

Question

.back-btn 服务器作为箭头的背景图像。我希望 :after 内容显示在图像下方。我不确定我做错了什么。我尝试将 margin-top 和 position:relative 添加到 :after 元素，但似乎没有任何效果。有人看到我做错了什么吗？

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

Answer 1

试试这个

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

update link of your code

Answer 2

不要给 .back-btn 一个高度，而是将该高度更改为 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>

：内容显示在原始元素上之后

:after content displaying over original element

css

pseudo-element