How to create circle of listed item and also show numbering in it

HTML & CSS
1

I have a tutorial website and i want to show listed item in form of circle and show numbers inside it.

2

Hi,

You can do something automatically like this for ie9+.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Styled Counters</title>
<style type="text/css" media="all">
ol.brackets {
	counter-reset: number;
	list-style-type: none;
}
ol.brackets li { counter-increment: number; line-height:1.5em}
ol.brackets li:before { 
	content:counter(number);
	border-radius:50%;
	padding:2px;
	margin:0 5px 0 0;
	display:inline-block;
	width:20px;
	text-align:center;
	background:#000;
	color:#fff;
	line-height:1.0;
	font-weight:bold;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
ol.brackets li:before { content: " (" counter(number) ") ";width:auto }
</style>
<![endif]-->
</head>
<body>
<h1>Styling with counters: IE9+</h1>
<ol class="brackets">
		<li>item 1</li>
		<li>item 2</li>
		<li>item 3</li>
		<li>item 4</li>
		<li>item 5</li>
		<li>item 6</li>
		<li>item 7</li>
		<li>item 8</li>
		<li>item 9</li>
		<li>item 10</li>
</ol>
</body>
</html>

For older browsers you’d have to do it manually and insert an element with a number inside so you can style it.

3

What if i not do it manually for old browsers. What it will show then in old browsers.

4

Hi,

You can supply some fallbacks for IE8 and under like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Styled Counters</title>
<style type="text/css" media="all">
ol.brackets {
	counter-reset: number;
	list-style-type: none;
}
ol.brackets li {
	counter-increment: number;
	line-height:1.5em
}
ol.brackets li:before {
	content:counter(number);
	border-radius:50%;
	padding:2px;
	margin:0 5px 0 0;
	display:inline-block;
	width:20px;
	text-align:center;
	background:#000;
	color:#fff;
	line-height:1.0;
	font-weight:bold;
}
</style>
<!--[if IE 8]>
<style type="text/css">
ol.brackets li:before { 
content: " (" counter(number) ") ";
width:auto;
color:#000;
background:#fff;
}
</style>
<![endif]-->
<!--[if lt IE 8]>
<style type="text/css">
ol.brackets {list-style:decimal;margin:0 0 0 2em}
</style>
<![endif]-->

</head>
<body>
<h1>Styling with counters: IE9+</h1>
<p>IE8 gets lists like this:<br />
		(1) item one<br />
		(2) item two<br />
		IE7 and under get normal lists:<br />
		1. item one<br />
		2. item two<br /></p>
<ol class="brackets">
		<li>item 1</li>
		<li>item 2</li>
		<li>item 3</li>
		<li>item 4</li>
		<li>item 5</li>
		<li>item 6</li>
		<li>item 7</li>
		<li>item 8</li>
		<li>item 9</li>
		<li>item 10</li>
</ol>
</body>
</html>

You may need to tweak positions for your own layout.

IE9+ (and all other modern browsers) get the styled counters.

IE8 gets lists like this
(1) item one
(2) item two

IE7 and under get normal lists:
1. item one
2. item two

5

I have tried it but it is showing both listed items, styled one and also simple. How i can remove simple one.

6

Hi,

You will need to show the code you are using as the demo I gave above does not exhibit this behaviour. I’m guessing that you coded the IE conditional comments incorrectly or in the incorrect place.

Copy my demo above and test and see that it’s working and then compare with the code you are using.