Dave McFarland
writes on September 8, 2014
Web browsers let you customize the look of most aspects of a page using CSS. But when rendering some page elements, web browsers are resistant to your styling efforts. For example, form elements like select menus, radio buttons and checkboxes have a certain look for each operating system, and browsers try to enforce that look in web forms.
Web browsers also dictate the way that bulleted and numbered lists should look. For example, browsers make it hard to change the style of bullets in unordered lists or numbers in ordered lists. Sure, there are a few CSS styles like list-style-type, list-style-image, and list-style-position, but doing something as simple as changing the color of the numbers in the list usually involves some weird HTML/CSS workarounds.
Fortunately, by combining a couple of lesser-known CSS properties you can add numbers to your ordered lists that look just the way you want them to. In fact, after this tutorial, you’ll be able to change fonts, colors and nearly every other style attribute of numbers in lists.
The secret is twofold: first, hide the regular numbers entirely, then use the ::before pseudo-element to add the numbers back.
1. Add a class or ID name to the ordered list. It’s a good idea to identify each list that you want to create custom counters for:
<ol class="custom-counter"> <li>This is the first item</li> <li>This is the second item</li> <li>This is the third item</li> <li>This is the fourth item</li> <li>This is the fifth item</li> <li>This is the sixth item</li> </ol>
If you simply use element selectors like ol or li, you’ll end up adding the same counter and counter design to every ordered list on the page.
2. Remove the style type from the list. First, you need to make sure that the browser isn’t adding its normal numbers. Applying the following style for the tag will do the trick:
.custom-counter {
margin-left: 0;
padding-right: 0;
list-style-type: none;
}
This style also removes the indent that browsers add to the beginning of numbered lists. Because some browsers use margin and some use padding to indent lists, you need to set both the left padding and left margin values to 0.
3. Name the ‘counter-increment’ for list items. CSS provides a property named ‘counter-increment’. It enables you to assign a name to your counter. This doesn’t do much, except provide a way to identify the counter when using the ::before pseudo-element, which we’ll look at in the next step. Here’s some basic code to provide a name for the counter:
.custom-counter li {
counter-increment: step-counter;
}
In this example, ‘step-counter’ doesn’t mean anything special, it’s not a CSS value or anything. It’s just a name we’ll use in the next step. You could use any name here, step, counter, or even bottles-of-root-beer-on-the-wall.
4. Use the ::before pseudo-element to add a counter numbers and style them:
.custom-counter li::before {
content: counter(step-counter);
margin-right: 5px;
font-size: 80%;
background-color: rgb(200,200,200);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}
The ::before pseudo-element enables you to insert content before an element. In this case, it will insert content before a list item. You use the CSS content property to tell the browser what content it should place at the beginning of the list item. This could be actual words, or something generated automatically by the browser.
Here we’re using the counter( ) value, which works by giving counter( ) the name of the identifier provided by the counter-increment property. Remember, in step 2, we named the counter-increment ‘step-counter’ by providing that name to the counter, we’re telling the browser to use a counter for each list item. That counter is increased by 1 for each list item, so we end up with the number 1 before the first list item, the number 2 before the second list item and so on.
Of course, that’s what browsers normally do. However, using the ::before pseudo-element we can also style those numbers, something that’s not possible with regular numbered list items. In fact, the rest of the properties in this style are just to make the counter look cool like give it a background color, make the corners curved, change the font color, and so on. This style shows you just some of the ways you can customize the appearance of the numbers in your ordered lists. There’s plenty more you can do, so feel free to use all the CSS you know to create interesting, fun and beautiful ordered lists.
You can find a complete, working example, of this technique on CodePen.
Read more about the CSS counter-increment.
TR/css3-content/#counters; the ::before pseudo-element at http://www.w3.org/TR/CSS2/
And also read more about generate.html#before-after-content; and the content property.
How do you start this kind of list with a different number?
For example, I have a list starting with “6”.
ol start=”6″ doesn’t work because the list style type is set to none
.custom-counter {list-style-type: none;}
Thanks for your post. It is very helpful. I have a suggestion. The use of list-style: none, however, creates an accessibility problem for screen readers. I think you can solve this by using
list-style:decimal url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
That should preserve the accessibility of the list for screen readers. The visual effect should be the same as the data uri produces a transparent 1×1 pixel gif.
OMG! This was so frickin’ useful and the added Fiddle by @Jon Conlin took it over the top!!!
Thanks Dave McFarland
This code really helps me a lot!
Same!!! thanks Dave!
Very useful article .. Was looking for this css
For anyone wanting a solution that prevents longer text from wrapping underneath the list bullet, I put one up on JSFiddle.
https://jsfiddle.net/vandigroup/3Lvpt9rc/1/
Thanks, this really helpful.
Helpful!
For those interested in adding a decimal point or parenthesis next to the numbers, they can use the following:
content: counter(step-counter) “.”;
or
content: counter(step-counter) “)”;
excellent. Thanks You’ve solved mu problem !! 😀
2015年の新素材-新作!高品質 腕時計高品質の追求 超N品を良心価格で提供詳しくは以下のようなブランドがあります。HERMES（バッグ、財布、時計） CHANEL（バッグ、財布、時計）LOUIS VUITTON（バッグ、小物、財布、時計） BVLGARI（財布、時計）Christian Dior（バッグ、財布） COACH（バッグ、財布）GUCCI（バッグ、財布） ROLEX（時計）OMEGA（時計） IWC（時計）FRANCK MULLER（時計） HUBLOT（時計）クロエ CHLOE バッグなどです。ご不明点が ございましたらお気軽にお問い合わせください http://www.gowatchs.com/brand-183.html
2015年の新素材-新作!高品質 腕時計高品質の追求 超N品を良心価格で提供詳しくは以下のようなブランドがあります。HERMES（バッグ、財布、時計） CHANEL（バッグ、財布、時計）LOUIS VUITTON（バッグ、小物、財布、時計） BVLGARI（財布、時計）Christian Dior（バッグ、財布） COACH（バッグ、財布）GUCCI（バッグ、財布） ROLEX（時計）OMEGA（時計） IWC（時計）FRANCK MULLER（時計） HUBLOT（時計）クロエ CHLOE バッグなどです。ご不明点が ございましたらお気軽にお問い合わせください http://www.brandiwc.com/brand-47-copy-0.html
2015ブランド財布コピールイヴィトン財布コピー，シャネル財布コピー，グッチ財布コピー，エルメス財布コピークロエ財布コピー，ブラダ財布コピー，ブルガリ財布コピー，ドルチェ＆ガッバ―ナ財布コピーバレンシアガ財布コピー，ボッテガ.ヴェネタ財布コピーロレックス時計コピー，ブルガリ時計コピー，フランク ミュラー時計コピーシャネル時計コピー，カルティエ時計コピー_オメガ時計コピー，IWC時計コピールイヴィトン時計コピー，オーデマ ピゲ時計コピー，ブライトリング時計コピーコピーブランド、ブランド激安、人気ブランドの販売、通販、オークション、新作のスーパーコピーブランドコピー、韓国スーパーコピー、ブランド激安、偽物ブランド、ブランドバッグ、激安かばん、ルイヴィトン偽物、財布激安.商品は全く写真の通りです。 http://www.bagkakaku.com/rolex_watch.html
激安 ブランドスーパーコピー新しいものを販売しています。ルイルイヴィトンコピー、グッチコピー、シャネルコピー、ブランドコピー、ブランドスコピー、ブランドコピー時計などルイヴィトンコピー 激安 ブランド、スーパーコピー、代引き対応、レプリカ、安心通販ルイヴィトン偽物、シャネル偽物、グッチ偽物、エルメス偽物、クロエ偽物、カルティエコピー、オメガコピー、IWCコピー楽天ヴィトンコピー屋 http://www.msnbrand.com/brand-copy-IP-20.html
ロレックスコピー販売、代引きロレックス時計コピー通販、全て新品、高い品質、激安、送料無料。ロレックス時計コピーなど世界中有名なブランドレプリカを格安で通販しております。N級品スーパーコピーブランドは 業界で最高な品質に挑戦しますロレックコピー,ロレックコピー代引き,ロレック激安,ロレックス偽物 ,最高級ロレックコピーロレックス時計コピー，フェラーリコピー時計，パネライコピー時計，パテックフィリップコピー時計，ヴァシュロン．コンスタンタンコピー時計，エルメスコピー時計，カルティエコピー時計ルイヴィトンコピー、 ロレックスコピー、シャネルコピー、グッチコピー、エルメスコピー、 ボッテガヴェネタコピー、 バーバリーコピー、ミュウミュウコピー、トリーバーチコピー、バレンシアガコピー、ディオールコピー、ブルガリコピー、ブラダコピー、 ドルチェ＆ガッバーナコピー、オメガコピー、フランク ミュラーコピー、gagaコピー。古驰拷贝, 靴/サンダル,サングラスコピー欧米O級品オーダー服各種のブランドの服、靴、、財布、腕時計の複製品をかばん一番ブランドliveブランドコピー服，ブランドバッグコピー，ブランド時計，ブランド靴シリーズ欧米O級品コーナーラッピング用品 http://www.brandiwc.com/brand-12-copy-0.html
スーパーコピーブランド 代引き安心老舗当店は海外高品質のブランドコピー 代引き,スーパーコピー 代引き通販人気老舗です。2015新作 ルイヴィトン コピー代引き、シャネル コピー代引き、 http://www.ooowatch.com/tokei/zenith/index.html
スーパーコピー商品、ブランドコピ ー財布、偽物バッグコピー財布コピーN 級品、ブ ランドスーパーコピー商 品、グッチ財布コピー,ミュウミュウ 財布激安。ブランドスーパーコ ピー銀座、ランドスーパーコピー財布。ブラ ンドスーパーコピー代引き、ブランドスーパーコピー専門店、ご購入する度、ご安心とご満足の届けることを旨にしておりますよろしくお願いします ありがとうございます http://www.newkakaku.com/gucci.htm
人気スーパーコピーブランド時計激安通販専門店私達は長年の実体商店の販売経験を持って、先進とプロの技術を持って、高品質のスーパーコピー時計づくりに 取り組んでいます。最高品質のロレックス時計コピー、カルティエ時計コピー、IWC時計コピー、ブライトリング時計コピー、パネライ時計コピー激安販売中商品の数量は多い、品質はよい。海外直営店直接買い付け！★ 2015年注文割引開催中，全部の商品割引10% ★ 在庫情報随時更新! ★ 実物写真、付属品を完備する。 ★ 100%を厳守する。 ★ 送料は無料です(日本全国)!★ お客さんたちも大好評です★ 経営方針: 品質を重視、納期も厳守、信用第一！税関の没収する商品は再度無料にして発送します http://www.okakaku.com/brand-2-copy-0.html
エルメス ボリードスーパーコピー.ブランド直営店.ブランド,エルメス激安通販,業界で最高な品質に挑戦します！”ブランドN級品ブランドコピー 代引き,スーパーコピー時計,ブランドN級品,楽天コピーブランド,,偽物ブラン日本最大級の最高のスーパーコピーブランド財布激安代引き販売店,スーパーコピー時計の激安老舗.！国内No.1時計コピー工房,アフターサービスも自ら製造したスーパーコピー時計なので、技術力でお客様に安心のサポー トをご提供させて頂きます。スーパーコピー 代引きN品をご 購入の方は、こちらへ.弊社は正規品と同等品質のコピー品を低価で お客様に提供します!すべての商品は品質2年無料保証です。100%実物写真ですし、品質が完璧です!”スーパーコピーブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピー http://www.ooowatch.com/tokei/vuitton/index.html
プラダ スーパーコピー,プラダ 財布 コピー,プラダ 新作 財布ブランド財布コピー，ブランド スーパーコピー 財布,プラダ スーパーコピー 財布，シャネル財布コピー,グッチ スーパーコピー 財布,エルメス スーパーコピー 財布,ルイヴィトン長財布コピー,スーパーコピー財布,エルメスコピー財布，各種のブランドはかばんをコピーします偽物ブランド,激安偽物,ブランド財布コピー,エルメス財布コピー,ブランドのコピーブランド財布,ルイ?ヴィトンブランド財布コピー,偽ブランドグッチ財布,D＆G,コピー財布偽物,偽物時計コピー,時計,ボッテガベルト,,靴,その他のバッグコピー,ブランド財布激安,ブランド激安販売,偽ブランド激安市場,通販送料無料專門店 ルイヴィトンコピー 児玉店，当店ルイヴィトン コピー 財布、ルイヴィトン コピー バッグ 全MAX80％OFF！期間限定SALE。最短即日発送。送料無料ルイヴィトン コピー,ルイヴィトン コピー 財布,ルイヴィトン コピー バッグ http://www.gowatchs.com/brand-197.html
ブランド激安市場コピーブランドコピー,スーパーレプリカ,ブランド激安市場 女社長 激安 シャネル 財布(CHANEL),グッチ 財布 (GUCCI) 激安,ヴィトン(lv) 新作 財布 激安 ルイヴィトン財布コピー,新作 ブランブランドを特別価格で提供中！ルイヴィトン財布、ルイヴィトンバッグ、ルイヴィトンベルトブランド激安市場ブランドコピー,大人気のルイヴィトン,スーパーコピー,様々な高品質ーパーコピー時計,ブルイヴィトン コピー ブランドレプリカ 激安 ブランド激安市場 ロレックス コピー スーパーコピー ルイヴィトン、シャネル、グッチ、エルメス、クロエ、ブラダ、ブルガリ ドルチェ＆ガッバ―ナ、バレンシアガ、ボッテガ.ヴェネタ偽物ロレックス、ブルガリ、フランク ミュラー、シャネル、カルティエ、オメガ、IWC、ルイヴィトン、オーデマ ピゲ、ブライトリング、 http://www.bagkakaku.com/hermes_bag.html
激安 ブランドスーパーコピー新しいものを販売しています。ルイルイヴィトンコピー、グッチコピー、シャネルコピー、ブランドコピー、ブランドスコピー、ブランドコピー時計などルイヴィトンコピー 激安 ブランド、スーパーコピー、代引き対応、レプリカ、安心通販ルイヴィトン偽物、シャネル偽物、グッチ偽物、エルメス偽物、クロエ偽物、カルティエコピー、オメガコピー、IWCコピー楽天ヴィトンコピー屋
スーパーコピー商品、ブランドコピ ー財布、偽物バッグコピー財布コピーN 級品、ブ ランドスーパーコピー商 品、グッチ財布コピー,ミュウミュウ 財布激安。ブランドスーパーコ ピー銀座、ランドスーパーコピー財布。ブラ ンドスーパーコピー代引き、ブランドスーパーコピー専門店、ご購入する度、ご安心とご満足の届けることを旨にしておりますよろしくお願いします ありがとうございます http://www.gginza.com/watch/chanel/index.html
財布コピー、バッグコピー、腕時計コピー、ベルトコピー靴コピーネックレスコピー、手帳コピー、小物コピー、SS品、N品、価格激安、品質の保証，2015人気ブランド偽物，歓迎光臨楽天★送料無料(日本全国)典雅気質！シャネルバッグCHH67723(*^^*)11月シャネル手作り新作(*^^*)時流の先端快適美品！シャネルブーツCH783283四季向け「 シャネル靴」最高な選択！ブランドコピー 代引きコピーブランド 代引きスーパーコピー 代引きスーパーコピーブランドバッグルイヴィトン コピーシャネル コピー
エルメス ボリードスーパーコピー.ブランド直営店.ブランド,エルメス激安通販,業界で最高な品質に挑戦します！”ブランドN級品ブランドコピー 代引き,スーパーコピー時計,ブランドN級品,楽天コピーブランド,,偽物ブラン日本最大級の最高のスーパーコピーブランド財布激安代引き販売店,スーパーコピー時計の激安老舗.！国内No.1時計コピー工房,アフターサービスも自ら製造したスーパーコピー時計なので、技術力でお客様に安心のサポー トをご提供させて頂きます。スーパーコピー 代引きN品をご 購入の方は、こちらへ.弊社は正規品と同等品質のコピー品を低価で お客様に提供します!すべての商品は品質2年無料保証です。100%実物写真ですし、品質が完璧です!”スーパーコピーブランド財布激安 偽物財布激安コピー ルイヴィトン財布偽物,偽物財布コピー http://www.gginza.com/watch/chanel/index.html
I’m trying this out. What I want to know is: Can I use CSS to change the text that follows the counter? I have been given the text of what I need to create, and it follows the list numbers with hyphens. Thank you!
Stuart Simon
Hi Stuart,
Yes, you can! If you want to add a dash after the counter you can do this:
content: counter(step-counter) " -";nice code – but what to do if the text is one or more lines… I think this is the same Question of Bill M above!? But I even do not understand his workaround…
Please anybody can explain this to me???
Thank you very much!
Blake
Interesting technique. Is there a clean way to ensure the bullet text does not wrap below the bullet when its long? The only workaround Ive found is to put a around the text inside the and then give it a left margin indent, and make the pseudo element float:left.
Hello Bill M!
I have the same Question as you asked before for this list wrap below issue…
I would like too ask you if you got any answer on your Question or have found any clean solution already?
Thanks much for an answer!
Blake
.custom-counter li {
counter-increment: step-counter;
margin-bottom: 10px;
display: flex;
padding: 5px;
align-items: flex-start;
}
Thanks so much, this is EXACTLY the code I needed – three years after you posted it no less! Thanks again. 😄
Great feature of CSS.
______________________________________________
Restaurant Games
Do you mind if I quote a few of your posts as long as I
provide credit and sources back to your site? My website is in the very same niche as
yours and my visitors would really benefit
from some of the information you provide here. Please let me know if this okay
with you. Cheers!
Stop by my webpage; norton antivirus 360 license key –
http://patch.com/ –
By the way, awesome feature of css that I have no idea it exists 🙂
It should say: Remember, in step 3, we named the counter-increment ‘step-counter’…
There’s a little error in the code, in the .custom-counter selector it should be padding-left: 0; instead of padding-right: 0;
Awesome website, I’ve been learning all my code from here. 🙂