Add a dot after content:counter(mycounter) - html-lists

Question

I'd like to add a dot after the content:counter(mycounter) in my Ol.
Current state without the dots:
How I'd like to present it:
The thing is when the content:counter(mycounter) is applied the text removes the dots.
The css will explain the most part...
/*Circle with number on the article-page*/
.article .article-info ol {
list-style:none;
counter-reset:mycounter;
padding:0;
}
.article .article-info ol li {
position:relative;
padding:5px 0;
}
.article .article-info ol li:before {
content:counter(mycounter);
counter-increment:mycounter;
position:absolute;
top:0;
left:-30px;
width:25px;
line-height:20px;
border-radius:50%;
color:#B71A8B;
text-align:center;
margin-top:7px;
font-weight:bold;
font-size:1.2em
margin-left:30px
}
.article .article-info ol li{
font-size: 16px;
line-height: 1.5em;
font-weight: 100;
opacity:.8;
}
So I'd like to somehow add something like this content:counter(mycounter, ".").
I know about the list-style:none and that's the reason, but is there anyway possible to add the dot without removing the list-style:none;

Answer 1

ol {
list-style: none;
counter-reset: mycounter;
margin: 0;
padding: 0
}
ol li {
position: relative;
padding-left: 25px;
}
ol li:before {
position: absolute;
left: 0;
content: counter(mycounter);
counter-increment: mycounter;
}
ol li:after {
content: '';
position: absolute;
left: 10px;
height: 4px;
width: 4px;
background-color: red;
border-radius: 100%;
bottom: 5px;
}
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>