项目符号如何指向<li>标签有边框顶部使用 list-style-position: inside</li>

Question

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?

Answer 1

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>

Answer 2

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>