CSS counter in url

Question

I am interested in setting the images next to list items dynamically based on it's position. You can see below that I am using the counter feature of CSS to keep track of the list items, and that I am trying to specify an image as the list style type using the counter.

ul{
    counter-reset:list;
}
li
{
    counter-increment:list;
    list-style:disc outside url("http://dummyimage.com/" counter(list) "x" counter(list) "");
}
<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

What is the correct way of getting the counter to work in a url declaration? Is it even possible?

Would've been so cool if this actually worked.

Mitja
– Mitja

2016-02-07 16:43:01 +00:00
Commented Feb 7, 2016 at 16:43 — Mitja
– Mitja, Commented Feb 7, 2016 at 16:43

BlueMagma · Accepted Answer · 2013-03-27 10:32:59Z

4

url cannot be compose out of multiple string

for example, this work:

url("http://dummyimage.com/10x10");

but this doesn't work :

url("http://dummyimage.com/" "10x10");

the counter has nothing to do with it

On the other hand, you could be able to do it using variables, try to take a look at LessCSS for axample.

answered Mar 27, 2013 at 10:32

BlueMagma

2,5381 gold badge25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pavlo · Accepted Answer · 2013-03-27 09:58:16Z

4

counter() function can only be used for content property. URL composition, like the one you are trying to create above, is impossible in CSS.

answered Mar 27, 2013 at 9:58

Pavlo

45.2k14 gold badges83 silver badges114 bronze badges

Comments

nd_macias · Accepted Answer · 2013-03-27 10:06:54Z

1

I'm not sure, what you are trying to achieve, but here's the sample code that you mind find useful: sample code

html

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

css

ul { counter-reset: list; }
li {
  counter-increment: list;
  list-style: disc outside url("http://placekitten.com/20/20");
}
li:before {
  counter-increment: section;
  content:"Item " counter(list) ". ";
}

edited Mar 27, 2013 at 10:06

answered Mar 27, 2013 at 9:59

nd_macias

8121 gold badge6 silver badges13 bronze badges

Collectives™ on Stack Overflow

CSS counter in url

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related