Question

我正在尝试实现以下显示，并想知道是否有更简洁的方法来编码它（例如。:: after）。请注意，标题是下划线但“。”不是下划线的一部分。另一种方法是使用2个span类，我试图避免使用它。

标题一。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。

标题二。这也是一个段落。这也是一个段落。这也是一个段落。这也是一个段落。这也是一个段落。这也是一个段落。这也是一个段落。这也是一个段落。这也是一个段落。这是一个段落。这是这也是一个段落。这也是一个段落。这也是一个段落。这也是一个段落。

我的代码如下：

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

1 个答案: