JSFiddle - React, Tailwind, and code Playground

by SamsChoice

HTML

<div class="dateNdots">
    <span class="date">august 2012</span>
    <span class="dots">.</span>
</div>

CSS

/* Date Dots General Widget Styles */
.dateNdots{
    overflow: hidden;
    position: relative;
}
    .dateNdots .date,
    .dateNdots .dots{
        display: inline-block;
        vertical-align: middle;

    }
    
        .dateNdots .date{
            white-space: nowrap;
            margin-right: 5px;
            
            
        }
        .dateNdots .dots{
            border-bottom: 1px dashed #58432D;
            overflow: hidden;
            position: absolute;
            text-indent: 100%;
            top: -35%;
            white-space: nowrap;
            width: 500px;
        }
        
        .blogPost .dateNdots .dots{
            top: 50%;
        }
    
        .lt-ie8 .dateNdots .dots{
            top: -50%;
        }