如何为一组 <LI> 添加一个 title/label 并给它们加阴影？

Question

我维护一个页面，其中包含近 100 个不断变化的列表项（添加和删除的项目）。我想通过给它们加阴影并在它们前面加上标签来将一些列表项组合在一起。理想的解决方案包括：

阴影包括项目符号区域
LI 文本正常缩进（例如，没有 list-style-inside）
有效代码
易于更新（即，添加或删除项目时不必手动更新所有 START 属性）
不需要Javascript

我不认为我可以拥有所有这些。

下面的代码有效，但我要么必须煞费苦心地更新所有不同的“开始”属性，要么我必须使用 Javascript 对所有内容进行编号。

    ol {margin:0px}

    ol+p {background:silver; margin:0px; padding-left:5px; border-radius:9px 9px 0px 0px; }

    p+ol {background:gainsboro}

<ol>
<li>item 1</li>
<li>item 2</li>
</ol>

<p>Group</p>
<ol start=3>
<li>item 3</li>
<li>item 4</li>
</ol>

<ol start=5>
<li>item 5
<li>item 6
</ol>

Answer 1

* {
  margin: 0;
  line-height: 1.4;
  box-sizing: border-box;
}

.group {
  position: relative;
  padding-top: 1.5em;
  list-style-position: inside;
  margin-left: -1em;
}

.group::before {
  content: "Group";
  font-weight: bold;
  padding-left: 0.5em;
  position: absolute;
  display: block;
  top: 0;
  left: -1em;
  width: calc(100% - 0.5em);
  height: 1.5em;
  background-color: silver;
  border-radius: 5px 5px 0 0;
  z-index: -1;
}

.group::after {
  content: "";
  position: absolute;
  display: block;
  top: 1.5em;
  left: -1em;
  width: 100%;
  height: calc(100% - 1.5em);
  background-color: gainsboro;
  border-radius: 0px 0px 5px 5px;
  z-index: -1;
}

<ol>
  <li>item 1</li>
  <li>item 2</li>

  <div class="group">
    <li>item 3</li>
    <li>item 4</li>
  </div>

  <li>item 5
  <li>item 6
</ol>

我不知道它在语义上有多正确，但这似乎完成了工作。

Answer 2

     ol {
   margin: 0px
 }


 ol>li {
   position: relative;
 }

 ol>li.new-class:before {
   content: "";
   position: absolute;
   display: block;
   width: 20px;
   height: 20px;
   background-color: yellow;
   z-index: -1;
   left: -22px;
 }

 ol>li.new-class:after {
   content: "new";
   display: inline-block;
   background-color: yellow;
   padding: 0px 5px;
 }

  <ol>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li class="new-class">item 5
    <li class="new-class">item 6
  </ol>

无需更改您的样式和代码结构。添加另外两个规则。看看这是不是你要找的。

Answer 3

扩展 Serversh 的答案，这做同样的事情，但使用更简单的 CSS 代码。请注意，它不符合“有效代码”的标准，因为将 DIV 作为 OL 的元素是无效的，但至少它允许自动 LI 编号。另请注意 DIV 有效但 P 无效，因为即使我们在 LI 之后关闭 P，浏览器也会自动关闭 P before LI.

/* THE LABEL LINE */

div span {
  display:block;
  margin-left:-5px;
  padding-left:7px;
  background:silver;
  border-radius:9px 9px 0px 0px;
  font-weight:bold;
}


/* THE LI's */

div {
  margin:6px 0px 6px -20px;
  padding-left:5px;
  background:gainsboro;
  border-radius:9px 9px 0px 0px
}

div li {margin-left:20px}

<ol>
<li>item 1</li>
<li>item 2</li>

<div><span>Group</span>
<li>item 3</li>
<li>item 4</li>
</div>

<li>item 5
<li>item 6
</ol>

如何为一组 <LI> 添加一个 title/label 并给它们加阴影？

How to add a title/label for a group of <LI>'s and shade them?

css

html-lists