htmlcsshtml-listsbullet

How do I adjust this custom <li> content as intended

1

Above is a mockup of the content that I am trying to replicate.

Here is what I have right now:

2

below are my <ul> and <li> with CSS but I cannot exactly replicate what is in the mockup even if I use padding or margin:

ul {
  padding: 0;
  list-style: none;
}

#b1::before {
  content: "• ";
  color: #B1B1B1;
}

#b2::before {
  content: '|';
  color: #B1B1B1;
  margin-bottom: 20px;
}
<ul>
  <li id="b1">Introduction</li>
  <li id="b2"></li>
  <li id="b1">Disclaimers</li>
  <li id="b2"></li>
  <li id="b1">Preservation of Immunities</li>
  <li id="b2"></li>
  <li id="b1">General</li>
</ul>

looking for another way to edit the CSS that is not padding or margin to get the design I need. Any help would be appreciated.

Solution

  • enter image description here

    @import "https://cdn.jsdelivr.net/gh/KunalTanwar/normalize/css/normalize.inter.min.css";
body {
  height: 100%;
  display: grid;
  place-items: center;
}

ul {
  display: flex;
  row-gap: 16px;
  flex-direction: column;
}

li {
  display: flex;
  line-height: 1;
  padding-left: 8px;
  align-items: center;
}

li::before {
  content: "";
  position: absolute;
  left: -12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  background-color: gray;
  box-shadow: 0 0 0 2px white;
}

li:not(:last-child)::after {
  content: "";
  z-index: -1;
  position: absolute;
  top: calc(100% - 6px);
  left: -8px;
  width: 1px;
  height: 32px;
  background-color: #CCCCCC;
}
    <ul>
  <li id="b1">Introduction</li>
  <li id="b1">Disclaimers</li>
  <li id="b1">Preservation of Immunities</li>
  <li id="b1">General</li>
</ul>