dotted text

by danield770

HTML

<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>
<div class="dottedText">The quick brown fox</div>

CSS

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;
}