制作内嵌标题样式而不跨度

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; 
    } 
} 

我怎样才能做到这一点没有一个<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