First off: it helps a lot to avoid noise, redundancy and unclear formatting. When people look at the question and see just how far they have to scroll just to find the comment section and give feedback on the length (never mind actually reading through it all to understand the question, or reaching the answer field to offer the first answer). Curators who see a long question are predisposed to reach for the "Needs More Focus" close reason, because a properly focused question that really asks one thing with a suitable scope really shouldn't need that much text. Sure, some questions are necessarily longer than others - especially in the world of web dev, since even the simplest questions typically involve an interaction between HTML, CSS and JavaScript. However, it is definitely not necessary to go on for pages and pages.
Before I saw the question, someone else had already edited to fix some formatting - replacing (mostly broken) repeated use of inline code formatting, with more appropriate multi-line code block formatting. I further improved this by wrapping the HTML and associated CSS in a "snippet", allowing the demonstration to run locally and avoiding the need for CodePen. The snippet feature exists pretty much specifically to support web dev questions (it doesn't support any other programming languages).
Fixing these things - by reading the formatting help and checking the post preview before submitting - really helps with creating the impression that you care about making the post readable (and thus answerable) for others. Please keep in mind that Stack Overflow questions are for everyone, not just you; a successful question will be read by many other people, and its answers will eventually help many other people.
I then edited the question - and title - to get to the point. Please carefully study the new version as an example. I'm not sure if regular users of the web dev tags will agree, but I think these changes expose a reasonably focused question. In the process of shortening the text, I incidentally avoided some other "needs more focus" red-flag phrases, like "I ask for an exhaustive list" and "Several problems exist with this approach" and "Please don't feel this question is too big for you".
For future reference, here is a list of things that IMO don't belong in questions:
Text that could be obviated by proper formatting (instead of starting paragraphs with "first", "second" etc., just use a bulleted list)
Anything to do with you (such as current mental state, plans for the future etc.) aside from the simple facts that you've written certain code or are trying to do some specific thing (and even then, only to the extent necessary to understand the question)
Any kind of "meta" commentary, such as the fact that you are trying to create a minimal reproducible example or that the community "covets" those. Instead, just show us the example. It took you 611 characters to tell us
The minimally reproducible example uses p
elements for constructing the list, not a formal list, I am sorry to mislead anyone who thought I was using li
elements, that was not my intention, but I thought the title more concise if I say "list of items" as opposed to "collective of p
elements in an html document that are meant to represent concepts related to one another in excess of a quantity one". There are fewer letters to p
than there are li
and no need to wrap it in another element of ul
or the sort, so that contributes to the minimually reproducible example so coveted in the community.
compared to the 60 that you saved on writing <p>
and </p>
instead of <ul>
and </ul>
(it should have been 30, even without the quibble that the list doesn't really need to be this long for a working demo), or the 60 that you saved by writing "list" instead of, say, "sequence" in various places in the question (again this should have been far less anyway). But even beyond space considerations, content like that goes on Meta, not in the main space.
Begging or pleading like "May such a person with knowledge be willing to share?", especially when it only requests help and does not ask a question directly.
Commentary on the perceived difficulty or complexity of the question
In particular, preemptive apologies or attempts to sympathize with the reader for the question length, fall into both the previous categories.
Redundant code - especially not a copy and paste of dozens of lines of joint CSS and HTML just to make a single-character change in the HTML. I was able to explain the point you were trying to make by highlighting one of the <p>
elements with much less text while also not needing to refer to a modified example at all.
Complex metaphors for what you want - describe it directly instead.
Rephrasings of already stated ideas - put more effort into making it clear the first time.
Recaps or summaries - if you feel the need for them because the question is already long, this is only making matters worse.
Headings - for the same reason.
"Lead-ins" like "For those who don't want to see what the code does, that's great!". If you want to explain your approach to the code, then just do that - don't announce your intention to do so.
Flowery prose: for example, "how can I do X" is better than "what techniques exist for doing X"
Your attempt at the question had example of almost all of these. So it's hardly surprising that I was able to cut the code in half (and could, I suppose, have gone further) and the prose by over 70%. Seriously - I've basically written you a style manual here, repeating myself for emphasis etc. and it still comes in shorter than just the prose of your original question.
<>
icon for your code