Tiny level 1 bullet
- January 12, 2022
- 4 replies
- 301 views
I created a multi-level bulleted list style for our project that goes round, square, circle, repeat. For some reason I don't understand, the Level 1 style bullet and text is noticeably smaller than Level 2, despite them being the same font size. It's also not the same size as the Level 4, which is the same bullet style repeated. Any ideas what could be causing this?
Here's the style:
p.RoundSquare {
--autonumber: autonumber;
--prefix-size: 10px;
--prefix-fixed-size: true;
--prefix-gap: 8px;
--vertical-spacing: 0px;
--list-indent: 0px;
position: relative;
font-family: Arial;
font-size: 1em;
color: #000000;
line-height: 150%;
margin-top: 6pt;
margin-bottom: 4pt;
margin-left: calc(var(--list-indent) + var(--prefix-size) + var(--prefix-gap));
}
p.RoundSquare:before {
counter-increment: p\.roundsquare1;
content: counter(p\.roundsquare1, disc);
text-align: right;
position: absolute;
left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
margin-right: var(--prefix-gap);
width: var(--prefix-size);
overflow: hidden;
}
p.RoundSquare[data-list-level="2"] {
--prefix-size: 10px;
--prefix-fixed-size: true;
--prefix-gap: 8px;
--vertical-spacing: 0px;
--list-indent: 30px;
position: relative;
font-family: Verdana;
font-size: 1em;
color: #000000;
margin-top: 6pt;
margin-bottom: 4pt;
margin-left: calc(var(--list-indent) + var(--prefix-size) + var(--prefix-gap));
}
p.RoundSquare[data-list-level="2"]:before {
counter-increment: item2;
content: counter(item2, square);
text-align: right;
position: absolute;
left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
margin-right: var(--prefix-gap);
width: var(--prefix-size);
overflow: hidden;
}
