将绝对定位元素宽度设置为其内容(它只是一个文本)

Question

我要建立这个

这是我的HTML代码

<div class="al-head-container">
    <div></div>
    <span>Center Websites</span>
</div>

这是css:

.al-head-container{
    margin: auto;
    width: 100%;
    padding:0 4%;
    position: relative;   
    box-sizing: border-box;
}

.al-head-container > span{
    font: 2.1em titr;
    color: #ae7f00;
    background-color: #FFFFFF;
    position: absolute;
    right: 0;
    left:0;

}
.al-head-container > div{
    width: 100%;
    height: 20px;
    background-image: url("../image/head-line.jpg");
    position: relative;
    top: 25px;
}

但这是代码的结果

问题是span宽度设置为100%,宽度不适合其内容.这是我从萤火虫得到的

如您所见,文本涵盖了DIV包含该行的内容.

我试图设置display:inline-block为span但没有改变.如何使绝对定位的跨度宽度适合内容？

Answer 1

为什么不完全在 CSS 中使用单个元素完成此操作：

div {
    border-top:1px solid lightgrey;
    border-bottom:3px solid lightgrey;
    height:2px;
    position:relative;
    margin-top:15px;
}
div:after {
    content:attr(data-label);
    position:absolute;
    top:-10px;
    left:50%;
    padding:0 20px;
    display:inline-block;
    background:#fff;
    transform: translateX(-50%);
    text-align:center;
    color:#A37716;
    font-size:24px;
}

<div data-label="Center Websites"></div>