親タグを継承せずにCSS :: afterを使用

Question

私は以下の表示を達成しようとしていますが、それをコード化するためのよりクリーンな方法があるかどうかを知りたいと思います。ヘッダーはアンダーラインであると仮定されていますが、 "。"下線の一部ではありません。これを行う代わりに、私が避けようとしている2スパンクラスを持つことです。

見出し1。          これはパラです。これはパラです。これはパラです。これはパラです。これはパラです。これはパラです。これはパラです。これはパラです。これはパラです。これはパラです。これはパラです。これはパラです。これはパラです。これはパラです。これはパラです。

見出し2。          これはまたパラです。これもパラです。これもパラです。これもパラです。これもパラです。これもパラです。これもパラです。これもまたパラです。これもまたパラです。これはまたパラです。これもパラです。これもパラです。これもパラです。これもパラです。次のように

私のコードは次のとおりです。

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

Answer 1

編集私はCSS3を取り出しました。 inline-blockと思われる。

情報：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>

！