重叠div和spacer

Question

嗨！我有这种情况在我面前，我试图实现这样的目标：

我的代码如下所示：

        <div class="about-me">
            <div class="aboutme-icon-holder">
                <img class="aboutme-icon" src="aboutme-icon.png" alt="">
            </div>
            <div class="spacer"></div>
            <div class="aboutme-link-holder">
                <a class="aboutme-link" href="#">ABOUT ME</a>
            </div>
        </div>

和我的css：

.spacer{
float:left;
display: flex;
content:"";
width:300px;
height:5px;
color: white;
margin: auto;
z-index: 2;
}

我的背景css代码如下所示：

.about-me{
float: left;
width:300px;
height:300px;
margin-right: 32px;
background: #1cb459;
background-image: url("aboutme-aboutme-overlay.png");
display: block;
position: relative;;
z-index: 1;
}

虽然我可以通过检查工具看到它，但我无法在背景（和背景图像）上找到我的垫片。我浏览了很多网站，但对我来说最困难的事情就是把它放在一起。谢谢你的帮助

Answer 1

请试试这个：

.spacer {
    background-color: #fff;
    color: white;
    content: "";
    display: flex;
    float: left;
    height: 5px;
    margin: auto;
    position: absolute;
    top: 50%;
    width: 300px;
    z-index: 2;
}