制作没有跨度的内联标题样式

Question

我实现了一个内联标题（正如我所说的那样），如下所示：

使用HTML如下：

<h1 class="title-inline-left"><span>Inline Title</span></h1>

和CSS（LESS）如下：

.title-inline-left{
    position: relative;

    &:after{
        display: block;
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        background-color: #333;
        width: 100%;
        height: 3px;
        z-index: -1;
    }
    span{
        background-color: #fff;
        z-index: 1;
        padding-right: 10px;
    }
}

如何在没有 a <span>的情况下实现？ （如果代码较少，则更好）

Answer 1

您可以使用HTML数据属性来执行此操作，请参阅以下代码：

HTML

<div class="title" data-content="Inline Title"></div>

CSS

.title {
   height: 4px;
   background: #000;
   position: relative;
}

.title:after {
   content: attr(data-content);
   background: #fff;
   font-size: 18px;
   font-family: Arial;
   font-weight: bold;
   position: absolute;
   top: -8px;
   padding: 0 7px;
}

直播demo

Answer 2

<强> CSS

.title-inline-left{
    position: relative;
}
   .title-inline-left:after{
        display: block;
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        background-color: #333;
        width: 100%;
        height: 3px;
        z-index: -1;
    }
   .title-inline-left:before {
  display: block;
  content: "Inline Title";
  width: 19%;
  background-color: white;
}

<强> HTML

<h1 class="title-inline-left"></h1>

DEMO