Question

考虑以下代码：

execution_date_fn

和CSS：

execution_date

提琴：http://jsfiddle.net/fLvns1z0/1/

我只希望对“ Top item”加上下划线，但要对整个文本加上下划线。甚至<ol class=top> <li>Top item <ol> <li>Sub</li> <li>list</li> <li>item.</li> </ol> </li> </ol>也无济于事。有什么想法可以使它工作并保持代码尽可能简单吗？

Answer 1

如果您不想添加额外的span或任何其他元素来实现其他人所说的结果，则可以使用css :first-line sudo类，请查看下面的工作示例：< / p>

.top > li:first-line {
  text-decoration: underline;
}

<ol class="top">
  <li>Top item
    <ol>
      <li>Sub</li>
      <li>list</li>
      <li>item.</li>
    </ol>
  </li>
</ol>

Answer 2

这似乎是由于<li>标签的行为所致。如果可能的话，请添加一个<span>，应该没问题：

.top span {
  text-decoration: underline;
}

<ol class=top>
  <li><span>Top item</span>
    <ol>
      <li>Sub</li>
      <li>list</li>
      <li>item.</li>
    </ol>
  </li>
</ol>

此外，当您添加<span>标记时，您显然要进行分隔。另外，真正的原因是我无法解决其他问题。对于那个很抱歉。 :(

Answer 3

您可以使用与背景相同的颜色重新定义text-decoration：

.top > li {
  text-decoration: underline;
}

.top ol li{
  text-decoration: underline;
  text-decoration-color: #fff;
}

<ol class=top>
  <li>Top item
    <ol>
      <li>Sub</li>
      <li>list</li>
      <li>item.</li>
    </ol>
  </li>
</ol>

或对元素的行为进行一些更改：

.top > li {
  text-decoration: underline;
}

.top ol{
  display:inline-block;
  width:100%;
  box-sizing:border-box;
}

<ol class=top>
  <li>Top item
    <ol>
      <li>Sub</li>
      <li>list</li>
      <li>item.</li>
    </ol>
  </li>
</ol>

如何仅对嵌套列表中的顶级项目加下划线？

3 个答案: