Good day, fellow reader.

Before I ever started considering writing, I did some research to find out which platform would be a better fit for me. I looked into several of them. And finally opted for Hashnode, because it provides a few key features.

Three pros (most important ones)

1. CONTENT OWNERSHIP. Caps are not accidental. This includes the option to set up custom domains for your blog

2. A community that is not only welcoming to newbies but also dynamic and diverse.

3. No paywall (I'm an advocate of freedom of information)

Barney Stinson from How I met your mother (TV Series)

Three cons

Well, it's not a land of roses around here, there was something I really liked from other platforms I couldn't find in Hashnode. It was a boomer. Those three little things were the difference between a normal article, and a LEGEN-DARY one. And those three things were this

What? Yeah, those three little dots, the horizontal rule from other platforms, so simple, yet so elegant. I wanted them. And I wanted them badly. I couldn't find an already made solution for this. So I borrowed some of the code from other fronts, and decided to do my own widget. That way I could easily insert that three dots everywhere in my articles.

Don't you know how to create a widget for hashnode? Catalin Pit explains it step by step

Three dots separator (horizontal ellipsis)

To create it, I set widgetid as three-dots-separator so I could use like this in my articles

%%[three-dots-separator]

and the markup as follows

<style type="text/css">
.three-dots-separator {
 box-sizing: border-box;
 display: flex;
 justify-content: center;
 text-decoration: none solid rgba(0, 0, 0, 0.8);
 margin: 32px 0px 14px;
 padding: 24px 0px 10px;
}

.first-dot, .second-dot {
 box-sizing: border-box;
 color: rgba(0, 0, 0, 0.8);
 display: block;
 height: 3px;
 width: 3px;
 background: rgb(8, 8, 8) none repeat scroll 0% 0% / auto padding-box border-box;
 margin: 0px 20px 0px 0px;
 outline: rgba(0, 0, 0, 0.8) none 0px;
}

.third-dot {
 box-sizing: border-box;
 color: rgba(0, 0, 0, 0.8);
 display: block;
 height: 3px;
 width: 3px;
 background: rgb(8, 8, 8) none repeat scroll 0% 0% / auto padding-box border-box;
 outline: rgba(0, 0, 0, 0.8) none 0px;
}
</style>
<div class="three-dots-separator" role="separator">
 <span class="first-dot"></span><span class="second-dot"></span><span class="third-dot"></span>
</div>

Hope you like it, feel free to use it, improve it, and comment with any suggestions you have!

See you around!