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

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.

 

1 answer

0 votes
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.
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 ;-)

CSS Akademie September 18, 2020

Thanks for your reply. I will check it.

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>

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events