Comments on: list-style

By: Djemals

Djemals — Thu, 24 Sep 2020 09:33:03 +0000

I like all the different ways of making list styles. I just wanted to share my favorite way of making circular bullets with css.

https://iiiji.com/circled-number-lists/

By: sharon

sharon — Mon, 17 Aug 2020 09:15:33 +0000

Thank you for this, it helped me to create this code which works on my site, this spaces after the check/tick create the spaces before any text:

ul {
  list-style: "✓  " outside none;
}

By: Khaki

Khaki — Thu, 04 Jul 2019 08:25:47 +0000

Any ideas on how I can make the digits in an order list bold?

By: Syed Usman Haniel

Syed Usman Haniel — Wed, 20 Jun 2018 09:54:29 +0000

Is there anyone who can guide me to create or find some beautiful CSS bullet points appearing one by one as it happens usually in one page websites or PPTs?

By: Tata

Tata — Tue, 07 Nov 2017 09:54:20 +0000

I want a “gallerylike” page with numbered images. Adding them in a list with links floating items is OK. It seems about like this:
| Image |
|- Title -|

I want to have the images automatically numbered left of the Title. Using list-style:decimal works fine. But the images are (of course) on left before the image.
Is there a way how to set the bullet/number position to get
|—Image—|
|- Nr. Title -|

By: ziomek

ziomek — Mon, 21 Aug 2017 10:42:41 +0000

There should be finally implemented ::market what styling bullets. I would like to not to use custom images and so on. Images are bad unless you use SVG.

By: Lenny

Lenny — Tue, 24 Nov 2015 11:32:52 +0000

I've made a mistake… !important in my previous comment isn't usefull…

By: Lenny

Lenny — Tue, 24 Nov 2015 11:28:30 +0000

In reply to Vasco.

You can create your own custom list-style-type as described in http://www.w3.org/TR/css-counter-styles-3/

@counter-style star {
    system: cyclic;
    symbols: \2606; /*utf8 code for "star" "★" */
    suffix: " ";
}

li {
    list-style: star !important;
}

You have some fancy char listed in this page : http://www.w3schools.com/charsets/ref_utf_symbols.asp
Fos many more utf8 char you have this awesome site : http://www.fileformat.info/info/unicode/char/2605/index.htm

By: qwqr

qwqr — Fri, 13 Nov 2015 11:03:10 +0000

In reply to Neil. grgfgfg

By: ko

ko — Mon, 26 Oct 2015 03:23:27 +0000

In reply to Alpay. okokok

By: Vasco

Vasco — Sun, 11 Oct 2015 15:31:12 +0000

Replying to myself, I was able to make it work with info from https://drafts.csswg.org/css-lists/#list-style-property using:

ul { list-style-type: “★”; }

However I was not able to user ☆ I had to paste it from the page into the editor, that could be a problem.

It works with the Sea Monkey browser, but not with Pale Moon.

By: Vasco

Vasco — Sun, 11 Oct 2015 15:13:16 +0000

Is there any way to use a certain char? More exactly a html entity like “☆” ?

Thanks.

By: MBAguy

MBAguy — Sat, 10 Oct 2015 05:18:52 +0000

nice article …. how did you have the grey background on list ? that cool …

By: Axel

Axel — Mon, 14 Sep 2015 20:32:20 +0000

how do I create a selector for the empty list-style-image? Assume I have the following rules:

#menu-Custom {
  list-style-image: url("file:///X:/Dev/Mozilla/Chibi-32.png")
}
#menuOnTop-menu-Custom > image {   
  width: 16px;
  height: 16px;
  margin-left: 5px;
}

and allow the user to pick an image – I have javascript setting

menuItem.style.listStyleImage = cssUri

which I get from a file they point at. But I want to also set

menuItem.style.listStyleImage = ‘none’;

and for that case define for the empty image

#menuOnTop-menu-Custom > image[url=none]  {
  width:0; 
  margin-left:0
}

what is the correct selector for image = none ?

By: Kathryn Grace

Kathryn Grace — Sun, 26 Jul 2015 16:43:16 +0000

Thank you so much for this. I’ve been trying to solve this problem for weeks. Your solution totally works!