bullet style (using a different character)

[PilcrowandStanza]

Hi all,

Is it possible to change the style of bullets in an epub ordered list?
In the print version, I have them as little boxes (like a checkbox). Is there a way to designate a style for the bullets themselves?

Or, would i have to add the character in each line (unordered) instead? (more work)

CSS tips appreciated!
Thanks

[Karellen]

Sure. See examples here... https://www.w3schools.com/cssref/pr_list-style-type.php

Just be aware that maybe not all ereaders will display the different types.

[Turtle91]

The W3Schools example in Karellen’s post lets you change the color of an html bullet, but you can also use images like so:

li::before {
  content: "•"; /* Insert content that looks like bullets */
  padding-right: 8px;
  color: blue; /* Or a color you prefer */
}


li::before {
  content: "url(../Images/bullet.png)";
  padding-right: 8px;}

As mentioned before, make sure you test on your target market’s devices/apps. Some of the more ancient devices may not support the pseudo-element ::before and you may need to provide fallback coding to cover those cases.

Also, make sure you pick a good image that works with different devices… eg. some may not look so good if it is a simple black image when the user selects night mode… you may not be able to see the bullet!!

Cheers!


EDIT:
Serves me right for trying to respond after a 12-hr work day from my phone...without testing...

Here is the code I should have posted

li::before {
  content: "";
  width:1em; height:1em;
  display: inline-block;
  background-image: url("../Images/bullet.svg");
  background-repeat:no-repeat;
  background-size:contain; 
}

Putting the image into the content line (with the quotes inside the parenthesis) works, but you can't adjust the size of the image - it is static.