- This topic is empty.
-
AuthorPosts
-
November 15, 2016 at 12:48 pm #247872havaysardParticipant
Please take a look at this page: https://www.thebalance.com/how-to-protect-your-home-from-freezing-temperatures-1388721
They have styled the numbered list so the numbers have a background color.
Is there anyway to achieve this for normal numbers that are not part of a numbered list.
Let me explain…
I am writing a post and I have a list of 5 ways to do x.
But I don’t want to wrap them with a numbered list like this:
<
ol>
- This is the first item
- This is the second item
- This is the third item
- This is the fourth item
- This is the fifth item
</ol
Instead I want to create the list without using list class. Like so:
- This is the first item
-
This is the second item
-
This is the third item
-
This is the fourth item
-
This is the fifth item
How can I achieve the same results as the example page I linked above for this situation?
I know I can use html to add the style manually everytime I write a new post. But is there anyway to add this globally so I can basically add the style to the css file of the site so whenever I use a number wrapped in a H tag it automatically take that style?
Sorry if I am confusing you guys and thank you for taking time to help.
November 15, 2016 at 1:10 pm #247876ShikkedielParticipantSeems like a perfect use case for a pseudo with
counter-increment
:Although reading back your additional description is indeed slightly confusing…
Edit – in retrospect I think I may have misunderstood altogether. Is your question maybe if HTML/CSS can recognise the content of a
h
element? In that case the answer would be negative. Then again, simplest way would be to give them a common class and style that.But maybe you could elaborate a bit more on the expected result.
My suggestion above would be a nice alternative for the example page though.
Second edit – this might be an approach too:
-
AuthorPosts
- The forum ‘Design’ is closed to new topics and replies.