Использование CSS :: after без наследования родительского тега

Question

Я пытаюсь добиться следующего отображения и хотел бы знать, есть ли более чистые способы его кодирования (например. :: after). Обратите внимание, что заголовок должен быть подчеркнутым, но «.» не является частью подчеркивания. Альтернатива для этого состоит в том, чтобы иметь 2 класса span, которых я пытаюсь избежать.

Первый заголовок.           Это пара. Это пара. Это пара. Это пара. Это пара. Это пара. Это пара. Это пара. Это пара. Это пара. Это пара. Это пара. Это пара. Это пара. Это пара.

Глава 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>

Я хотел бы знать, почему это работает!