fix: safe bullet pattern — never use display:grid on li with inline code#67
Open
MageByte-Zero wants to merge 1 commit into
Open
fix: safe bullet pattern — never use display:grid on li with inline code#67MageByte-Zero wants to merge 1 commit into
MageByte-Zero wants to merge 1 commit into
Conversation
CSS grid on <li> creates anonymous boxes per text node and inline element, swallowing the bullet marker into one of those boxes. Bullets render broken or misaligned. Closes zarazhangrui#62. Documents the safe position:absolute ::before hanging-indent pattern that works correctly with inline <code>, nested lists, and screen readers.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Generated presentations that use
display:gridordisplay:flexon<li>elements containing inline<code>render with broken bullets. CSS grid wraps each text node and inline element in anonymous boxes, swallowing the bullet marker into one of those boxes. The list either shows no bullets, misaligned bullets, or bullets appearing inside the text flow.This reproduces reliably whenever a feature list mixes plain text and inline code:
<li>Use <code>clamp()</code> for all sizes</li>.Closes #62.
Fix
Document the root cause and provide the safe alternative:
position: absoluteon::beforefor the bullet marker. This pattern correctly handles inline elements, nested lists, and screen readers.Relation to existing PRs
No open PR addresses this. Issue #62 has been open since 2026-05-10 with no fix submitted.
Testing
Tested locally with a feature list containing inline
<code>— theposition:absolute ::beforepattern renders correctly in all browsers.