Forums
Home Product Q&A Discussion groups Articles Ask a question Search
Learning
Events
Champions

Forums

Articles
Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Product Q&A
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

How to use css count for a user macro? What is missing?

CSS Akademie
CSS Akademie September 17, 2020

Hello,

I have created a user macro with this content

## @noparams

<style>
.ourtest body {
list-style-type: none !important;
counter-reset: css-counter 0 !important;
}

.ourtest p {
counter-increment: css-counter 1 !important;
}

.ourtest p::before {
content: counter(css-counter) ". " !important;
}

</style>

<body>
<div class="ourtest">$body</div>
</body>

expecting to enter text, which will be numbered automatically

HTML:

<p>text1</p>

<p>text2</p>

<p>text3</p>

Result:

1. text

2. text

3. text

But the numbering is missing on the page. Any idea?

Thanks for any support.

 

Answer
Watch
Like Be the first to like this
672 views

1 answer

0 votes
Bill Bailey
Bill Bailey
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
September 17, 2020

If no numbers are appearing, then you may have a conflict with the space CSS overwriting your CSS. Take a look using the browser inspect function to see if your class is actually being applied and then see what rules are overwriting yours.

Also, you may want to change your structure to add the class to your p tag, rather than the wrapper around it.

More details will help ;-)

View More Comments
CSS Akademie
CSS Akademie September 18, 2020

Thanks for your reply. I will check it.

Like
CSS Akademie
CSS Akademie September 21, 2020

Yes, the problem was that the class wasn't overtaken to the p tag. But I changed the structure a little bit and it works:

## @noparams

<style>
.custom-counter {
margin-left: 0;
padding-right: 0;
list-style-type: none !important;

}
.custom-counter ol {
list-style: none !important;
padding: 0;


}
.custom-counter li {
counter-increment: step-counter;
margin-bottom: 20px;
padding-left: 50px;
text-indent: -3.3em;
list-style-position: outside !important;
}

.custom-counter li::before {
content: counter(step-counter);
margin-right: 10px;
color: white;
font-weight: regular;
padding: 2px 16px 2px 12px;
background: url('https://academy.css.de/_images/bg.png') center no-repeat;
background-size: contain;
line-height: 20px;
height: 20px;
}
</style>

<body>
<div class="custom-counter">$body</div>
</body>

Like
Reply

Suggest an answer

Log in or Sign up to answer
Confluence
Confluence
TAGS
AUG Leaders

Atlassian Community Events

    See all events
    Community
    Forums
    FAQs Forums guidelines
    Learning
    About learning Resources
    Events
    Champions
    Copyright © 2025 Atlassian
    Privacy Policy Notice at Collection Terms Security
    Welcome illustration

    Welcome to the new Atlassian Community

    Online forums and learning are now in one easy-to-use experience.

    By continuing, you accept the updated Community Terms of Use and acknowledge the Privacy Policy. Your public name, photo, and achievements may be publicly visible and available in search engines.