製作內嵌標題樣式而不跨度

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