In this example, a paragraph is shown inside a list item (<li>) without any special styling:
https://i.sstatic.net/Mk4xk.png
<li>
<p>
hehehe
...
</p>
</li>
However, when a custom list style type is applied, the layout changes:
https://i.sstatic.net/T6jSj.png
The corresponding HTML code is:
<li class="docs-test">
<p>
hehehe
...
</p>
</li>
Here is the CSS used for this customization:
.docs-test {
color: red;
list-style-type: none;
}
.docs-test::before {
content: '\2022 ';
color: #828282;
display: inline-block;
margin-right: 10px;
}
.docs-test p {
display: inline-block;
}
While list-style-image could be an alternative for some cases, it's not applicable to all scenarios. How can paragraphs within custom list items retain their position and behave like standard unstyled list items? The objective is to maintain consistent handling of paragraphs across styled and non-styled lists.