Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Styling numbers wrapped in H tag

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #247872
    havaysard
    Participant

    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:

    1. This is the first item
    2. This is the second item

    3. This is the third item

    4. This is the fourth item

    5. 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.

#247876
Shikkediel
Participant

Seems like a perfect use case for a pseudo with counter-increment:

Example

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:

http://www.w3schools.com/cssref/sel_firstletter.asp

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Design’ is closed to new topics and replies.