CSS custom tag shape - extra line - html

Question

Please refer to this link.https://codepen.io/wbeeftink/pen/dIaDH. If you zoom out or zoom in you will see that the tag has an extra line sticking out at the bottom. Please refer to the screenshot.
Could someone please let me know how this could be fixed. Or is there a different way to create such tags?
This is the code that I use
HTML
<span class="tag">HTML</span>
CSS
.tag {
background: #eee;
border-radius: 3px 0 0 3px;
color: #999;
display: inline-block;
height: 26px;
line-height: 26px;
padding: 0 20px 0 23px;
position: relative;
margin: 0 10px 10px 0;
text-decoration: none;
-webkit-transition: color 0.2s;
}
.tag::before {
background: #fff;
border-radius: 10px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
content: '';
height: 6px;
left: 10px;
position: absolute;
width: 6px;
top: 10px;
}
.tag::after {
background: #fff;
border-bottom: 13px solid transparent;
border-left: 10px solid #eee;
border-top: 13px solid transparent;
content: '';
position: absolute;
right: 0;
top: 0;
}

Answer 1

Change style of .tag::after from right: 0 to left: 100%.
body {
font: 12px/1.5 'PT Sans', serif;
margin: 25px;
}
.tags {
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
}
.tags li {
float: left;
}
.tag {
background: #eee;
border-radius: 3px 0 0 3px;
color: #999;
display: inline-block;
height: 26px;
line-height: 26px;
padding: 0 20px 0 23px;
position: relative;
margin: 0 10px 10px 0;
text-decoration: none;
-webkit-transition: color 0.2s;
}
.tag::before {
background: #fff;
border-radius: 10px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
content: '';
height: 6px;
left: 10px;
position: absolute;
width: 6px;
top: 10px;
}
.tag::after {
background: #fff;
border-bottom: 13px solid transparent;
border-left: 10px solid #eee;
border-top: 13px solid transparent;
content: '';
position: absolute;
left: 100%;
top: 0;
}
.tag:hover {
background-color: crimson;
color: white;
}
.tag:hover::after {
border-left-color: crimson;
}
<h1>Tags</h1>
<h2>Example 1</h2>
Front-end development
<h2>Example 2</h2>
<ul class="tags">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>