css - 在不继承父标签的情况下使用 CSS::after

Question

我正在尝试实现以下显示，并想知道是否有更简洁的编码方式(例如::after)。请注意，标题应该是下划线，但“。”不是下划线的一部分。另一种方法是有 2 个跨度类，我试图避免。

Heading One.       This is a para.This is a para.This is a para.This is a para.This is a para.This is a para.This is a para.This is a para.This is a para.This is a para.This is a para.This is a para.This is a para.This is a para.This is a para.

Heading Two.      This is also a para. This is also a para.This is also a para.This is also a para.This is also a para.This is also a para.This is also a para.This is also a para.This is also a para.This is also a para.This is also a para.This is also a para.This is also a para.This is also a para.

我的代码如下:

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

我希望我知道为什么会这样!