How can the bullet point inside an <li> tag have border-top using list-style-position: inside

user_10998612 0
Viewed 192

I am putting together an unordered list. Each line item contains several elements (<h> tags, <p> tags, etc.) and is separated by a top-border.

By default, the bullet point is not underneath the top-border. To fix this, I assigned list-style-position: inside; to <ul>. However, the content of the list now "wraps" around the bullet point. It would be great to separate the bullet point and the content vertically.

li {
  border-top: 1px solid #000000
}

ul.inside {
list-style-position: inside;
}
<ul>
  <li>
    Item 1
    <p> Content does not wrap around bullet point. Great! But border-top is not over the bullet </p>
  </li>
  <li>
    Item 2
  </li>
  <li>
    Item 3
  </li>
</ul>

<hr>

<ul class="inside">
  <li>
    Item 1
    <p> Content wraps around the bullet point. Boo! But border-top is over the bullet though! </p>
  </li>
  <li>
    Item 2
  </li>
  <li>
    Item 3
  </li>
</ul>

Is there a clean way to do this?

css html
2 Answers

here you go

li {
  border-top: 1px solid #000000
}

ul.inside {
list-style-position: inside;
}
ul
{
list-style: none;
    padding: 0;
}
li::before {
  Content: "•";
    font-size: 25px;
    position: relative;
    top: 2px;
    padding-right: 5px;
}
<ul>
  <li>
    Item 1
    <p> Content does not wrap around bullet point. Great! But border-top is not over the bullet </p>
  </li>
  <li>
    Item 2
  </li>
  <li>
    Item 3
  </li>
</ul>


<ul class="inside">
  <li>
    Item 1
    <p> Content wraps around the bullet point. Boo! But border-top is over the bullet though! </p>
  </li>
  <li>
    Item 2
  </li>
  <li>
    Item 3
  </li>
</ul>

user_130563430

Found an innovative solution using CSS Grid courtesy of Modern CSS. It's important that the content in the <li> tags is wrapped in a <div>.

That said, this solution requires :before and does not work with ::marker.

ul {
  padding: 0;
}

li {
  border-top: 1px solid #000000;
  display: grid;
  grid-template-columns: 0 1fr;
  grid-gap: 1em;
}

ul li::before {
  content: '•';
  font-size: 1em;
}
<ul>

  <li>
    <div>
      <div>Hello</div>
      <div>Second div</div>
    </div>
  </li>
  <li>
    Bullet 2
  </li>
  <li>
    Bullet 3
  </li>

</ul>

user_109986120
Related