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一个高度，而是将高度更改为填充顶部：

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

：显示原始元素的内容后

2 个答案: