如何在使用 content:before 的同时在 CSS 中的 DD 标签上获得悬挂缩进

Question

我们有这个页面，里面有一堆定义列表。在 Word 中制作样式模型的人想出了这个绝妙的主意，将定义列表呈现为“术语 - 值”和悬挂缩进。我不得不承认它确实很棒但是很难。我一直在玩这个，悬挂缩进确实是必要的，否则页面会变得非常难看。

如果我尝试使用网格（无论如何都不是最优的）；由于之前的内容，页面呈现中断。但是 dd 上的悬挂缩进样式似乎没有得到尊重。

dl dd {
  display: inline;
  margin: 0;
  padding-top: .25em;
}
dl dd:after{
  display: block;
  content: '';
}
dl dt{
  display: inline-block;
  padding-top: .25em;
}
dl dd:before {
  content: "- ";
}
dl dd{
  text-indent: 3.5em hanging;
}

<dl>
  <dt>term</dt>
<dd>sentence sized definition belongs here</dd>
  <dt>term with long name</dt>
<dd>sentence sized definition belongs here</dd>
  <dt>term</dt>
<dd>paragraph sized definition paragraph sized definition paragraph sized definition paragraph sized definition I'm not going the really type it long but long enough to get hanging indent</dd>

</dl>

在使用 hanging 关键字之前，我实际上尝试过相反的 margin 和 text-indent 方法，即悬挂缩进，但出现故障；就像渲染相信我正在尝试做其他事情一样。

dl dd {
  display: inline;
  margin: 0;
  padding-top: .25em;
}
dl dd:after{
  display: block;
  content: '';
}
dl dt{
  display: inline-block;
  padding-top: .25em;
}
dl dd:before {
  content: "- ";
}
dl dd{
  text-indent: -3.5em;
  margin-left: 3.5em;
}

<dl>
  <dt>term</dt>
<dd>sentence sized definition belongs here</dd>
  <dt>term with long name</dt>
<dd>sentence sized definition belongs here</dd>
  <dt>term</dt>
<dd>paragraph sized definition paragraph sized definition paragraph sized definition paragraph sized definition I'm not going the really type it long but long enough to get hanging indent</dd>

</dl>

Answer 1

您的 dd 元素是 display: inline — text-indent 不适用于这些元素。

现在允许使用 divs 对术语和描述进行分组，这样做可以让您通过将 text-indent 应用于 divs 来非常直接地使用悬挂缩进。我强烈建议现在不要使用 hanging 关键字，因为支持它的少数浏览器仅在启用实验性功能的情况下才这样做。现在，使用填充和负数 text-indent 来模拟悬挂缩进：

dl dt, dl dd {
  display: inline;
  margin: 0;
}
dl dd::before {
  content: "- ";
}
dl div {
  text-indent: -3.5em;
  padding-top: .25em;
  padding-left: 3.5em;
}

<dl>
  <div>
    <dt>term</dt>
    <dd>sentence sized definition belongs here</dd>
  </div>
  <div>
    <dt>term with long name</dt>
    <dd>sentence sized definition belongs here</dd>
  </div>
  <div>
    <dt>term</dt>
    <dd>paragraph sized definition paragraph sized definition paragraph sized definition paragraph sized definition I'm not going the really type it long but long enough to get hanging indent</dd>
  </div>
</dl>

如何在使用 content:before 的同时在 CSS 中的 DD 标签上获得悬挂缩进

How do I get a hanging indent on a DD tag in CSS while also using content:before

html

css

text-indent