CODEWITHSUNDEEP
htmlcsstext-indent
Joshua
Joshua

Reputation: 43317

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

We have this page with a bunch of definition lists. The guy making style mockups in Word came up with this brilliant idea to render the definition lists as "term - value" and hanging indents. I have to admit it actually is brilliant but it's difficult. I've been playing around with this quite a bit and the hanging indents really are necessary or the page becomes very ugly.

If I try to use grid (which is suboptimal anyway); the page rendering breaks down because of content before. But it appears that the hanging indent style on dd just isn't honored.

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>

I had actually tried the opposed margin and text-indent method of saying hanging indent before using the hanging keyword and it was glitchy; like the rendering believed I was trying to do something else.

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>

Upvotes: 2

Views: 791

Answers (1)

BoltClock
BoltClock

Reputation: 724132

Your dd elements are display: inline — text-indent won't work on those.

Now that grouping terms and descriptions using divs is allowed, doing that lets you use hanging indents quite straightforwardly by applying text-indent to the divs instead. I strongly recommend not using the hanging keyword right now as the few browsers that support it only do so with experimental features enabled. For now, use padding, and a negative text-indent to simulate the hanging 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>

Upvotes: 2

Related Questions