Question 225227 in Html Question posted in
Some basic documentation can be found here.

Html – CSS for creating list with left border aligned with bullet

I am trying to style a list so that there are vertical lines shown until the end of the list if a child element is present.
Here’s the list HTML:

<ul>
    <li>list item
        <ul>
            <li>list item</li>
            <li>list item 2</li>
        </ul>
    </li>
    <li>second list
        <ul>
            <li>list item</li>
        </ul>
    </li>
</ul>

It should look like this:

enter image description here

I tried adding a border on the left, but I do not know how I can change where the border starts.

This .css file:

ul {
  border-left: 1px solid;
}

results in

enter image description here

How can I align the left border to start below the bullet? And how can I remove the leftmost border?

Tags:

4

Answers


  1. 0

    Try This:

    .border-list {
  border-left: 1px solid;
  margin-left: -14px;
  padding-left: 30px;
}
    <ul>
    <li>list item
        <ul class="border-list">
            <li>list item</li>
            <li>list item 2</li>
        </ul>
    </li>
    <li>second list
        <ul class="border-list">
            <li>list item</li>
        </ul>
    </li>
</ul>

    Explanation:

    How can I align the left border to start below the bullet?

    Answer: it might be a hacky way but I added margin-left: -14px; to move the element a bit to the left (backward space)

    How can I remove the leftmost border?

    Answer: I just didn’t style the parent list so it doesn’t have the border style.

    Note: I added padding-left: 30px; for styling purposes.

    Login or Signup to reply.
  2. 0

    You can create a pseudo-element on each nested ul to create a new line between each ul.

    Use this selector if you don’t want a line on the last ul:

    .main > li:not(:last-of-type) > ul::before {}

    .main > li > ul {
  position: relative;
}

.main > li:not(:last-of-type) > ul::before {
  content: '';
  width: 1px;
  /* height of the line / spacing between line + dots */
  height: 85%;
  display: block;
  background-color: black;
  position: absolute;
  /* align with dots */
  left: -11px;
  /* use these two properties to always center it vertically */
  top: 50%;
  transform: translateY(-50%);
}
    <ul class="main">
  <li>list item
    <ul>
      <li>list item</li>
      <li>list item 2</li>
    </ul>
  </li>
  <li>second list
    <ul>
      <li>list item</li>
    </ul>
  </li>
    <li>third list
    <ul>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
    </ul>
  </li>
      <li>fourth list
    <ul>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
    </ul>
  </li>
</ul>

    Use this selector if you want a line on the last ul:

    .main > li > ul::before{}

    .main > li > ul {
  position: relative;
}

.main > li > ul::before {
  content: '';
  width: 1px;
  /* height of the line / spacing between line + dots */
  height: 85%;
  display: block;
  background-color: black;
  position: absolute;
  /* align with dots */
  left: -11px;
  /* use these two properties to always center it vertically */
  top: 50%;
  transform: translateY(-50%);
}
    <ul class="main">
  <li>list item
    <ul>
      <li>list item</li>
      <li>list item 2</li>
    </ul>
  </li>
  <li>second list
    <ul>
      <li>list item</li>
    </ul>
  </li>
    <li>third list
    <ul>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
    </ul>
  </li>
      <li>fourth list
    <ul>
      <li>list item</li>
      <li>list item</li>
      <li>list item</li>
    </ul>
  </li>
</ul>
    Login or Signup to reply.
  3. 0

    You can get a similar effect, by using some of pseudo elements.

    .line-list, .line-list > li {
  position: relative;
}

.line-list {
  padding-left: .7em;
}

.line-list > li::marker {
  z-index: 1;
}

.line-list::before, .line-list > li::before, .line-list > li::after {
  content: "";
  position: absolute;
}

.line-list::before {
  top: 0;
  bottom: 0;
  left: .05em;
  border-left: 1px solid #000;
}

.line-list > li::before {
  width: 1em;
  height: 1.25em;
  background-color: white;
  position: absolute;
  left: -1em;
  z-index: 0;
  top: 0em;
}

.line-list > li::after {
  top: .5em;
  width: .3em;
  height: .3em;
  border-radius: 50rem;
  background-color: black;
  position: absolute;
  left: -.75em;
  z-index: 1;
}
    <ul class="line-list">
    <li>list item
        <ul>
            <li>list item</li>
            <li>list item 2</li>
        </ul>
    </li>
    <li>second list
        <ul>
            <li>list item</li>
        </ul>
    </li>
</ul>
    Login or Signup to reply.
  4. 0

    There is a property list-style-position: inside which moves your bullet points inside the content box of the ul:

    ul ul {
  border-left: 1px solid black;
}

.inside {
  list-style-position: inside;
}

.outside {
  list-style-position: outside;
}
    <h1>list-style-position: inside</h1>
<ul class="inside">
    <li>first list
        <ul>
            <li>list item</li>
            <li>list item 2</li>
        </ul>
    </li>
    <li>second list
        <ul>
            <li>list item</li>
        </ul>
    </li>
</ul>

<h1>list-style-position: outside</h1>
<ul class="outside">
    <li>first list
        <ul>
            <li>list item</li>
            <li>list item 2</li>
        </ul>
    </li>
    <li>second list
        <ul>
            <li>list item</li>
        </ul>
    </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search