EDIT: Removed fiddle link, added code as stack snippet.
So I am very new to HTML/CSS/JS coding, so please take it easy on me if I don't use the correct terminology.
* {
box-sizing: border-box;
overflow: auto;
font-family: monospace;
list-style-type: none;
}
#OutputColumn{
font-size: 12px;
}
.wrapper{
height: 100%;
display: table;
width: 100%;
}
.main{
height: 100%;
display: table;
border: 1px black;
width: 100%;
}
ol{
margin: 0;
}
li{
position: relative;
}
li:before{
display: inline-block;
float: left;<!--This is the float that appears to fix things but doesn't.-->
}
ol.CapitalLetterDot{
counter-reset: CapitalLetterDotList;
}
ol.NumberDot{
counter-reset: NumberDotList;
}
ol.LowercaseLetterDot{
counter-reset: LowercaseLetterDotList;
}
ol.NumberParenthesis{
counter-reset: NumberParenthesisList;
}
ol.LowercaseLetterParenthesis{
counter-reset: LowercaseLetterParenthesisList;
}
ol.LowercaseRomanDot{
counter-reset: LowercaseRomanDotList;
}
ol.ExtraClass{
counter-reset: ExtraClassList;
}
ol.LowercaseRomanDot > li:before{
content: counter(LowercaseRomanDotList, lower-roman) ".";
counter-increment: LowercaseRomanDotList;
}
ol.LowercaseLetterParenthesis > li:before{
content: counter(LowercaseLetterParenthesisList, lower-alpha) ")";
counter-increment: LowercaseLetterParenthesisList;
}
ol.CapitalLetterDot > li:before{
content: counter(CapitalLetterDotList,upper-alpha) ". ";
counter-increment: CapitalLetterDotList;
}
ol.NumberDot > li:before{
content: counter(NumberDotList,decimal) ". ";
counter-increment: NumberDotList;
}
ol.LowercaseLetterDot > li:before{
content: counter(LowercaseLetterDotList,lower-alpha) ". ";
counter-increment: LowercaseLetterDotList;
}
ol.NumberParenthesis > li:before{
content: counter(NumberParenthesisList,decimal) ") ";
counter-increment: NumberParenthesisList;
}
ol.ExtraClass > li:before{
content: counter(ExtraClassList, lower-roman) "# ";
counter-increment:ExtraClassList;
}<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="Content-Security-Policy" content="script-src 'self';"><title id="Title">Spec Writer</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><div class="wrapper"><div class="main"><div id="OutputColumn"></div><div id="equipment_quantities" style="font-size: 12px;"><div id="Entry8" style="display: inline-block;"><ol class="CapitalLetterDot"><span>WORK INCLUDED - DEMO</span><li><ol class="NumberDot"><span>Provide all labor, materials, equipment and services necessary
to provide complete and operating stage power, lighting controls, and motorized
rigging system as indicated on the drawings, and as specified herein.</span></ol></li><li><ol class="NumberDot"><span>By preferred alternate, dimming and controls and motorized
rigging manufacturer shall be REDACTED. It is recognized
that REDACTED is the industry standard for such equipment.</span></ol></li><li><ol class="NumberDot"><span>Section Includes:</span><li><ol class="LowercaseLetterDot"><span> Materials, components, modifications,
assemblies, equipment and services as specified herein. These include, but
are not limited to:</span><li><ol class="NumberParenthesis"><span>Verification of site dimensions and
conditions.</span></ol></li><li><ol class="NumberParenthesis"><span>Submittals as required by the Contract
Documents.</span></ol></li><li><ol class="NumberParenthesis"><span>Engineering of equipment and systems as
required by the Contract Documents</span></ol></li><li><ol class="NumberParenthesis"><span>Manufacture of equipment and systems as
required by the Contract Documents</span></ol></li><li><ol class="NumberParenthesis"><span>Scheduling, sequencing and coordination
with other trades</span></ol></li><li><ol class="NumberParenthesis"><span>Site supervision of equipment and
systems installation specified herein and elsewhere in the Contract
Documents</span></ol></li><li><ol class="NumberParenthesis"><span>Testing and demonstration of equipment
and systems as specified herein and elsewhere in the Contract
Documents</span></ol></li></ol></li></ol></li><li><ol class="NumberDot"><span>All materials shall be listed by an OSHA approved Nationally
Recognized Testing Laboratory (NRTL).</span></ol></li></ol></div></div></div></div></body></html>I've attached a small section of the generated HTML code, along with the CSS file, in order to avoid a fiddle with 7000+ lines of code.
I have a javascript program that dynamically creates HTML elements with specific classes in order to create nested lists. I use before depending on the class to handle counters/bullets (since I often use custom counters such as roman numerals + dot, lowercase letter + parentheses, etc for list bullets).
I was having issues for a long time with a blank line between the before: content and the <li> content, which was mostly fixed by adding float:left on CSS line 30. The problem is that when I copy and paste the HTML output to Microsoft Word (where the rest of the team needs to be able to see the formatted list), the line breaks reappear.
I've tried using display: inline-block just about anywhere I can think to put it, to no avail.
So my question is: what is causing the before: to break lines? How can I get my content from an HTML page into Microsoft Word while keeping the CSS formatting?