CSSカスタムタグの形状 - 余分な行

Question

このリンクを参照してください。 https://codepen.io/wbeeftink/pen/dIaDH。ズームインまたはズームインすると、タグの下部に余分な線が突き出ていることがわかります。スクリーンショットを参照してください。

誰かが私がこの固定する方法を教えてくださいでした。または、そのようなタグを作成する別の方法はありますか？ これは私がleft: 100%にright: 0から.tag::afterの

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

変更スタイルを使用するコードです。

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>