Definition List w/ Border Using :before

In this example below you will see how to do a Definition List w/ Border Using :before with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by jasonadelia, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jasonadelia ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Definition List w/ Border Using :before</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      .bad dt {
  font-weight: bold;
  float: left;
  width: 10rem;
  clear: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: .5rem;
  border-top: 1px solid #A8ADB4;
}
.bad dd {
  margin-left: 11rem;
  padding: .5rem;
  border-top: 1px solid #A8ADB4;
}
.sibling dt:first-of-type,
.sibling dd:first-of-type {
  border-top-width: 0;
}
.sibling dd + dd {
  border-top-width: 0;
}
.good dl {
  position: relative;
}
.good dt {
  font-weight: bold;
  float: left;
  width: 10rem;
  clear: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: .5rem;
}
.good dt:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #A8ADB4;
  margin-top: -0.5rem;
}
.good dt:first-child:before {
  content: none;
}
.good dd {
  margin-left: 11rem;
  padding: .5rem;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <h1>The problem with borders and multiple DDs</h1>
<dl class="bad">
    <dt>This is a term.</dt>
    <dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
    <dt>Here is another term.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
    <dd>Some things have more than one definition like this one.</dd>
    <dt>Here is term that shares a definition with the term below.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
</dl>

<h1>Fix With Using Sibling Selector and first-of-type</h1>
<dl class="bad sibling">
    <dt>This is a term.</dt>
    <dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
    <dt>Here is another term.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
    <dd>Some things have more than one definition like this one.</dd>
    <dt>Here is term that shares a definition with the term below.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
</dl>

<h1>Fix with :before</h1>
<dl class="good">
    <dt>This is a term.</dt>
    <dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
    <dt>Here is another term.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
    <dd>Some things have more than one definition like this one.</dd>
    <dt>Here is term that shares a definition with the term below.</dt>
    <dd>And it gets a definition too, which is this line.</dd>
</dl>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/jasonadelia/definition-list-with-border-using-before-htJge */
.bad dt {
  font-weight: bold;
  float: left;
  width: 10rem;
  clear: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: .5rem;
  border-top: 1px solid #A8ADB4;
}
.bad dd {
  margin-left: 11rem;
  padding: .5rem;
  border-top: 1px solid #A8ADB4;
}
.sibling dt:first-of-type,
.sibling dd:first-of-type {
  border-top-width: 0;
}
.sibling dd + dd {
  border-top-width: 0;
}
.good dl {
  position: relative;
}
.good dt {
  font-weight: bold;
  float: left;
  width: 10rem;
  clear: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: .5rem;
}
.good dt:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #A8ADB4;
  margin-top: -0.5rem;
}
.good dt:first-child:before {
  content: none;
}
.good dd {
  margin-left: 11rem;
  padding: .5rem;
}

Comments