dancemc15 dancemc15 - 1 year ago 47
CSS Question

How can I create multiple rows of dots that are closely set together?

I am interested in creating a series of dots that are very close together, like how they have it on the Bloomberg website:

How can I create this? I especially don't know how to create the close compact lines in between the rows.

.underlined {
border-bottom: 1px dotted #000;

Thanks in advance!

Answer Source

Inspect element


.dots {
 background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFUlEQVQIW2P83Sf3n7XoESMjAxQAADjFBAPqoJzEAAAAAElFTkSuQmCC) repeat;
    text-indent: -119988px;
    overflow: hidden;
    text-align: left;
    text-transform: capitalize;
    content: "pattern dots";
    height: 1.25rem;
    width: 100%;
    display: block;
<div class="dots"></div>