I am currently working on creating a "reference document" section within a Webhelp Responsive website that I have developed using a DITA map. My goal is to display a typical document list with unique reference numbers ([1], [2], [3]...[N]) followed by relevant document information such as document number, title, etc. Additionally, I would like to organize this list into distinct sections (e.g., Manuals, Procedures, articles, etc.) while ensuring that the list counter continues seamlessly.
Upon exploration, I found that inserting a <div> element between two <li></li> elements achieves the desired rendering, although it may not be considered valid HTML practice.
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>Default list:</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<div style="margin-left: -20px; margin-top:20px; margin-bottom: 20px;">test divider</div>
<li>Coca Cola</li>
</ol>
<p>Remove bullets, margin and padding:</p>
<ul class="demo">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Is there a proper method to achieve this without splitting the <ol> into separate lists or utilizing an external counter through CSS? It is essential for me to retain the original counter, as it is utilized in the linking system during the DITA-HTML transformation process.