2016-08-02 61 views
0

我想實現下面的顯示,並想知道是否有更清晰的代碼編寫方式(例如。:: after)。請注意,標題設置爲下劃線,但「。」不是下劃線的一部分。另一種做法是有2個跨班級,我試圖避免。在不繼承父標記的情況下使用CSS ::

標題一。                這是一個para.This是一個para.This是一個para.This是一個para.This是一個para.This是一個para.This是一個para.This是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。這是一個段落。

標題二。          這也是一個段落。這也是一個para.This也是一個para.This也是一個para.This也是一個para.This也是一個para.This也是一個para.This也是一個para.This也是一個para.This是也是一個段落。這也是一個段落。這也是一個段落。這也是一個段落。這也是一個段落。

我的代碼如下:

 <STYLE> 
    .headingTitle{ 
     font-weight: bold; 
     text-decoration:underline; 
     padding-right: 1em; 
    } 

    .headingTitle::after{ 
     font-weight: bold; 
     text-decoration: none; 
     content:"."; 
    } 
    </STYLE> 

    <li><span class="headingTitle">Heading One</span>This is a para.This is a para.This is a para.This is a para.This is a para.</li> 
+0

你有一個錯字。使用'.headingTitle'和你的代碼工作:https://jsfiddle.net/2psvhrkk/ –

+1

@JonP OP的問題是,他們不想強調期間。 –

+0

啊,好!仍然存在錯字問題。 –

回答

3

編輯我已經採取了CSS3。 inline-block似乎足夠。

來自info的信息:https://developer.mozilla.org/en/docs/Web/CSS/text-decoration。另外請注意,這在IE中不起作用。我已成功通過Chrome和Firefox測試。

.headingTitle{ 
 
     font-weight: bold; 
 
     text-decoration:underline; 
 
     padding-right: 1em; 
 
     display:inline-block; 
 
    } 
 

 
    .headingTitle::after{ 
 
     font-weight: bold; 
 
     text-decoration: none; 
 
     content:"."; 
 
     display:inline-block; 
 
    }
<ul> 
 

 
    <li><span class="headingTitle">Heading One</span>This is a para.This is a para.This is a para.This is a para.This is a para.</li> 
 
</ul>

我希望我知道爲什麼這個作品!

+0

https://www.w3.org/TR/CSS21/text.html#propdef-text-decoration的第一段以某種方式解釋它我猜。不確定這些條件中的哪些恰好適用於此,但它與內聯框有關。 – CBroe

+0

至少你的答案在比我的小提琴更多的瀏覽器中工作...... –

+0

@jon P礦山工作後,刪除顯示:從主類inline塊,並在::之後聲明它。不知何故,它只能這樣工作。感謝您的解決方案:) –

相關問題