Advertisement
CSS

Stylised HTML Ordered List

Post image

In CSS there are two types of lists, unordered <ul> and ordered <ol>. Both of these should cover the basic requirements for a web developer, but styling ordered lists can be tricky.

This tutorial will take you through how to create an attractive numbered list in HTML and CSS that can be used for a HTML chart list.

Here's what we're creating -

See the Pen Billboard Top 10 Chart by lawnch (@lawnch) on CodePen.

HTML for Attractive CSS List

Even though we're technically ordering our list, we want to use an unordered list. This will give us bullet points instead of numbers, we'll add the numbers in ourselves.

Start by creating a basic unordered list with the content you want to use. For this example I'm using a multi-tiered list-item, so I'm using <strong> tags within my list-items to highlight certain text.

For my example I'm creating a Billboard Top 10 chart. Obviously you can fill the list with whatever content you desire.

<h1>Billboard Top 10</h1>
<ul class="chart">
  <li>Pharrell Williams <strong>Happy</strong></li>
  <li>John Legend <strong>All Of Me</strong></li>
  <li>Jason Derulo Featuring 2 Chainz <strong>Talk Dirty</strong></li>
  <li>Katy Perry Featuring Juicy J <strong>Dark Horse</strong></li>
  <li>Idina Menzel <strong>Let It Go</strong></li>
  <li>Bastille <strong>Pompeii</strong></li>
  <li>DJ Snake & Lil Jon <strong>Turn Down for What</strong></li>
  <li>Justin Timberlake <strong>Not A Bad Thing</strong></li>
  <li>Chris Brown Featuring Lil Wayne & French Montana Or Too $hort Or Tyga <strong>Loyal</strong></li>
  <li>Lorde <strong>Team</strong></li>
</ul>

Very straight forward so far.

CSS for HTML List Style

First of all we need to style the list,

ul.chart  {
	counter-reset: counter;
}

In this code we set our HTML counter, this starts the numbering for us.

Next we need to style our list-items.

ul.chart > li  {
	color: #bababa;
	display: block;
	font-size: 11px;
	line-height: 25px;
	margin: 12px 0 8px;
	padding: 0 0 0 50px;
	position: relative;
	text-transform: uppercase;
}

There are a couple of important points in this -

  • padding: 0 0 0 50px; - this is using the web developers compass, setting the left padding to 50px, which will make it avoid our counter.
  • position: relative; - as we'll be using position: absolute for our HTML counter, we need to use position relative to outline a boundry.

To create a multi-tiered list-item we need to style the <strong> tags. You can do this however you like. Here's my style -

ul.chart > li > strong  {
	color: #121212; 
	display: block;
	font-size: 3em;
	font-weight: 400;
	padding: 3px 0 18px;
	text-transform: none;
}

By using display: block; we create a new line within the list-item.

Now we want to style our list counter. To do so need to use the CSS :before selector. This allows us to place and style content before the list item, hence why we added 50px padding-left to the list items.

	
ul.chart > li:before  {
	color: #bababa;
	content: counter(counter);
	counter-increment: counter;
	font: bold 32px/1 'Noto Sans', sans-serif;
	left: 0;
	margin: -16px 0 0;
	position: absolute;
	top: 50%;
	transition: all 400ms ease; 
}

There are a couple of important styles in this -

  • content: counter(counter); - this inserts the counter content before the list-item. You can use multiple counters by changing the name of the counter within the bracket, just make sure you change the names elsewhere.
  • counter-increment: counter; - this is responsible for telling the CSS which counter we want to increase with each line.
  • top: 50%; - combined with the positioning, this places the counter in the vertical centre of the list-item (almost).
  • margin: -16px 0 0; - this pulls the content up by 16px, which is half the size of the text, making it absolute vertical centre.
  • transition: all 400ms ease - this is used to add CSS animation to the content, anything that changes will be animated over 0.4 seconds.

The final part of our HTML chart is to add a hover style to our counter. To do that we need to use both the :before and :hover selectors.

	
ul.chart > li:hover:before  {
	color: tomato;
}

There you have it, a very simple HTML counter / HTML chart that uses CSS and unordered lists. You can play with the styling to create an attractive ordered list using CSS.

Post links to your results in the comments below.

Thanks for reading.

Code

HTML Chart code:

<h1>Billboard Top 10</h1>
<ul class="chart">
  <li>Pharrell Williams <strong>Happy</strong></li>
  <li>John Legend <strong>All Of Me</strong></li>
  <li>Jason Derulo Featuring 2 Chainz <strong>Talk Dirty</strong></li>
  <li>Katy Perry Featuring Juicy J <strong>Dark Horse</strong></li>
  <li>Idina Menzel <strong>Let It Go</strong></li>
  <li>Bastille <strong>Pompeii</strong></li>
  <li>DJ Snake & Lil Jon <strong>Turn Down for What</strong></li>
  <li>Justin Timberlake <strong>Not A Bad Thing</strong></li>
  <li>Chris Brown Featuring Lil Wayne & French Montana Or Too $hort Or Tyga <strong>Loyal</strong></li>
  <li>Lorde <strong>Team</strong></li>
</ul>

CSS for HTML counting Chart (including links to an imported font):

@import "http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic";html{font-family:'Noto Sans', sans-serif;font-size:17px;line-height:1.5}

h1 {
  font-weight: 400;
}

	ul.chart  {
		counter-reset: counter;
	}
	
		ul.chart > li  {
			color: #bababa;
	 		display: block;
			font-size: 11px;
			line-height: 25px;
			margin: 12px 0 8px;
			padding: 0 0 0 50px;
			position: relative;
	 		text-transform: uppercase;
		}

		ul.chart > li > strong  {
			color: #121212; 
			display: block;
			font-size: 3em;
			font-weight: 400;
			padding: 3px 0 18px;
			text-transform: none;
		}
				
			ul.chart > li:before  {
	  			color: #bababa;
				content: counter(counter);
				counter-increment: counter;
				font: bold 32px/1 'Noto Sans', sans-serif;
				left: 0;
				margin: -16px 0 0;
				position: absolute;
				top: 50%;
	   			transition: all 400ms ease; 
			}

			
			ul.chart > li:hover:before  {
				color: tomato;
			}
Advertisement
You may also like:
comments powered by Disqus