使用 CSS ::after 而不继承 parent 标签

Question

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

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>

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

使用 CSS ::after 而不继承 parent 标签

Using CSS ::after without inheriting parent tag

css

pseudo-element