tumblr visit counter

Custom list order number position

During Wigoo development process, CEO requested to place numbers under each list item content.

Positioning elements is not a problem, but list item bullets are not elements. Consequently, list item bullets can not be positioned (top, right, bottom, left) to it’s content.

Possible solution is to place <span> as last element into each <li> and change the content with JavaScript, but it is stupid solution.

The best solution is placing pseudo element after each <li> content, but the problem is setting it’s dynamic content.

Follows basic HTML strucutre:


<ol>
    <li>
        <figure></figure>
    </li>
... ... ...
    <li>
        <figure></figure>
    </li>
</ol>

Content of pseudo elements can be set in CSS property content which value can be normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit (w3c spec. content)

The trick is to use counter value, which act as function. (w3c spec. counters)


#example, #example li {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#example li {
	float: left;
	margin: 20px;
	counter-increment: myIndex; /* Define "Variable" */
}

#example li figure {
	display: block;
	width: 100px;
	height: 100px;
	margin: 0;
	padding: 0;
	border: 1px solid #ccc;
	background-color: #eee;
}

#example li:after {
	display: block;
	text-align: center;
	content: counter(myIndex); /* Print "Variable" */
}

Example jsfiddle

Related W3C specifications:

Useful pseudo elements related links:

Dalibor Sojic

WEB Developer, freelancer.

More Posts - Website - Twitter - LinkedIn - Google Plus

One Response to “Custom list order number position”

  1. dino

    Nov 05. 2012

    Useful, tnx for sharing!

    Reply to this comment

Leave a Reply