CSS benutzerdefinierte Tag-Form - zusätzliche Linie

Question

Bitte beachten Sie diesen Link. https://codepen.io/wbeeftink/pen/dIaDH. Wenn Sie das Bild verkleinern oder vergrößern, sehen Sie, dass das Etikett unten eine zusätzliche Linie aufweist. Bitte beachten Sie den Screenshot.

Könnte jemand bitte lassen Sie mich wissen, wie dieses Problem behoben werden konnte. Oder gibt es eine andere Möglichkeit, solche Tags zu erstellen? Dies ist der Code, dass ich

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

ändern Stil von .tag::afterright: 0-left: 100% verwenden.

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> 
 
<a href="#" class="tag">Front-end development</a> 
 

 
<h2>Example 2</h2> 
 
<ul class="tags"> 
 
    <li><a href="#" class="tag">HTML</a></li> 
 
    <li><a href="#" class="tag">CSS</a></li> 
 
    <li><a href="#" class="tag">JavaScript</a></li> 
 
</ul>