Dotted text in css?

Question

Is it possible to make dotted text with css?

I know that the obvious thing would be to use a dotted font, but If I only need to use dotted text sparingly, then having th

Answer 1

With a few minor adjustments we can get pretty close:

1) Change font-family to courier new

2) Add a text-shadow with a horizontal and vertical offset on the div

3) Changed units to ems - (like @BDawg suggested)

FIDDLE

div {
  font-size: 40px;
  font-family: courier new;
  position: relative;
  text-shadow: -.03em -.03em 0 black;
}
.dottedText:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, transparent 50%, transparent 50%), radial-gradient(circle, transparent 20%, white 50%) 30px 30px;
  background-size: .1em .1em;
}
div + div {
  font-size: 60px;
}
div + div + div {
  font-size: 80px;
}
div + div + div + div {
  font-size: 100px;
}

The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox