dancemc15 dancemc15 - 3 months ago 9
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: http://www.bloomberg.com/markets/commodities

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;
text-decoration:none;
padding:0px;
}


Thanks in advance!

Answer

Inspect element

SNIPPET

.dots {
line-height:17px;
  }
.dots:before{
 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>

Comments