Entity List Item Markers

Lists in HTML have a limited number of markers that they can use. However, it is possible to make any HTML entity a list marker by using the trick that we use below. In the CSS style, we use a selector along with the ":before" designation to place the entity in front of each <li> element that is inside a </ul> element.

To make sure that the standard markers do not also show up, we use a CSS selector on the </ul> tag and set the list-style to none, as shown below. Then we add the content property to the <li> selector with the entity value in hexadecimal. This is placed inside quotes and preceeded by a blackslash, as shown below. Additionally, you will probably need to work with the margins and padding to make the markers show up with the proper spacing.

EntityListMarkers.html

<!DOCTYPE html>
<html>
<head>
  <title>XoaX.net's HTML</title>
  <style>
    ul {
      list-style: none;
      margin-left: 0;
      padding-left: 1.2em;
      text-indent: -1.2em;
    }
    ul li:before {
      content: '\002670';
      display: block;
      float: left;
      width: 2.0em;
      height: 0.2em;
      margin-top:-0.15em;
      margin-bottom:0.3em;
      margin-right:-1.0em;
      padding:0.0em;
      color: #AA5500;
    }
  </style>
</head>
<body>
  <ol type="I">
    <li><b>The Ten Commandments</b><ul>
      <li>I am the LORD your God: you shall not have strange Gods before me.</li>
      <li>You shall not take the name of the LORD your God in vain.</li>
      <li>Remember to keep holy the LORD'S Day.</li>
      <li>Honor your father and your mother.</li>
      <li>You shall not kill.</li>
      <li>You shall not commit adultery.</li>
      <li>You shall not steal.</li>
      <li>You shall not bear false witness against your neighbor.</li>
      <li>You shall not covet your neighbor's wife.</li>
      <li>You shall not covet your neighbor's goods.</li>
    </ul></li>
    <li><b>The Beattitudes</b><ul>
      <li>Blessed are the poor in spirit, for theirs is the kingdom of heaven.</li>
      <li>Blessed are those who mourn, for they will be comforted.</li>
      <li>Blessed are the meek, for they will inherit the earth.</li>
      <li>Blessed are those who hunger and thirst after righteousness, for they will be
      filled.</li>
      <li>Blessed are the merciful, for they shall be shown mercy.</li>
      <li>Blessed are the pure in heart, for they will see God.</li>
      <li>Blessed are the peacemakers, for they will be called the sons of God.</li>
      <li>Blessed are those who are persecuted because of righteousness, for theirs is
      the kingdom of heaven.</li>
    </ul></li>
  </ol>
</body>
</html>

Output

The Ten Commandments
- I am the LORD your God: you shall not have strange Gods before me.
- You shall not take the name of the LORD your God in vain.
- Remember to keep holy the LORD'S Day.
- Honor your father and your mother.
- You shall not kill.
- You shall not commit adultery.
- You shall not steal.
- You shall not bear false witness against your neighbor.
- You shall not covet your neighbor's wife.
- You shall not covet your neighbor's goods.
The Beattitudes
- Blessed are the poor in spirit, for theirs is the kingdom of heaven.
- Blessed are those who mourn, for they will be comforted.
- Blessed are the meek, for they will inherit the earth.
- Blessed are those who hunger and thirst after righteousness, for they will be filled.
- Blessed are the merciful, for they shall be shown mercy.
- Blessed are the pure in heart, for they will see God.
- Blessed are the peacemakers, for they will be called the sons of God.
- Blessed are those who are persecuted because of righteousness, for theirs is the kingdom of heaven.