Question: Any CSS masters who know of a way to make a dotted 0? I had the idea of having a white strike through combined with a white forward slash and back slash as [described here](https://stackoverflow.com/questions/9685483/google-chrome-diagonal-css-line-through), but perhaps there's a better way.

Answer: 
Option 1. Position a bullet over it:

```
<div>HELL<span class="dottedO">O<span>&bull;</span></span> WORLD</div>

```

CSS:

```
.dottedO {
  display: inline-block;
  overflow: auto;
  position: relative;
}

.dottedO span {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  text-align: center;
}

```

Option 2: Using the unicode Bilabial click character (ʘ):

```
<div>&#664;</div>

```

JSBIN: <http://jsbin.com/ewufod/1>

Note the above two solutions may cause issues with screen readers, search engines, etc as you're adding a non-standard character to the mix.

Option 3: Background image

Wrap the 'O' in a span, set it to `display: inline-block` and give the span a background image of a dot. Drawback: that won't print.

Option 4: Use a font that already has this style (embed a web font).
You can use a custom font, or if it's good enough would the U+25CC DOTTED CIRCLE character `◌` work for you?