最後の子供に詰め物が残らない

Question

私はナビゲーションメニューを作ろうとしており、私は:after、:before、:last-childを使っています。私の最後の子供の詰め物は、私が取り除かないように見えることができます。私はリンクに赤い背景を追加したので、理解しやすいです。私が欲しいのは、リンク

.content-nav { 
 
    height: ; 
 
    width: ; 
 
    background: ; 
 
    text-align: center; 
 
    padding: 10pt 
 
} 
 

 
.content-nav a { 
 
    color: #000; 
 
    padding: ; 
 
    text-decoration: none; 
 
    font-style: italic; 
 
    font-weight: bold; 
 
    font-size: 12pt; 
 
    background: red 
 
} 
 

 
.content-nav a:after { 
 
    content: " + "; 
 
    padding: 0 5pt 0 5pt; 
 
    color: rgb(246, 22, 66) 
 
} 
 

 
div.content-nav a:last-child:after { 
 
    content: ""; 
 
}

<div class="content-nav"> 
 
    <h1>Navigate the site</h1> 
 
    <a href="company.php" title="Company - (About Us, Projects)">company</a> 
 
    <a href="careers.php" title="Job Openings">careers</a> 
 
    <a href="contact.php" title="Contact Us">contact</a> 
 
    <a href="contact.php" title="Refer to Contact Page">support</a> 
 
    <a href="#">Hello</a> 
 
    <a href="#">Hello</a> 
 
</div>

周りに等しいパディングあるすべてのヘルプは高く評価されます。あなたが明示的に0にパディングを設定する必要が

Answer 1

下記参照...私はこれがあると思いますあなたが探していたもの：

.content-nav { 
 
    height: ; 
 
    width: ; 
 
    background: ; 
 
    text-align: center; 
 
    padding: 10pt 
 
} 
 

 
.content-nav a { 
 
    color: #000; 
 
    padding: ; 
 
    text-decoration: none; 
 
    font-style: italic; 
 
    font-weight: bold; 
 
    font-size: 12pt; 
 
    background: red 
 
} 
 

 
.content-nav a:after { 
 
    content: " + "; 
 
    padding: 0 5pt 0 5pt; 
 
    color: rgb(246, 22, 66) 
 
} 
 

 
div.content-nav a:last-child:after { 
 
    content: ""; 
 
    padding: 0; 
 
}

<div class="content-nav"> 
 
    <h1>Navigate the site</h1> 
 
    <a href="company.php" title="Company - (About Us, Projects)">company</a> 
 
    <a href="careers.php" title="Job Openings">careers</a> 
 
    <a href="contact.php" title="Contact Us">contact</a> 
 
    <a href="contact.php" title="Refer to Contact Page">support</a> 
 
    <a href="#">Hello</a> 
 
    <a href="#">Hello</a> 
 
</div>

Answer 2

：

div.content-nav a:last-child:after { 
    content: ""; 
    padding: 0 0 0 5pt; 
} 

Answer 3

追加padding-right: 0;div.content-nav a:last-child:after

.content-nav { 
 
    height: ; 
 
    width: ; 
 
    background: ; 
 
    text-align: center; 
 
    padding: 10pt 
 
} 
 

 
.content-nav a { 
 
    color: #000; 
 
    padding: ; 
 
    text-decoration: none; 
 
    font-style: italic; 
 
    font-weight: bold; 
 
    font-size: 12pt; 
 
    background: red 
 
} 
 

 
.content-nav a:after { 
 
    content: " + "; 
 
    padding: 0 5pt 0 5pt; 
 
    color: rgb(246, 22, 66) 
 
} 
 

 
div.content-nav a:last-child:after { 
 
    content: ""; 
 
    padding-right: 0; 
 
}

<div class="content-nav"> 
 
    <h1>Navigate the site</h1> 
 
    <a href="company.php" title="Company - (About Us, Projects)">company</a> 
 
    <a href="careers.php" title="Job Openings">careers</a> 
 
    <a href="contact.php" title="Contact Us">contact</a> 
 
    <a href="contact.php" title="Refer to Contact Page">support</a> 
 
    <a href="#">Hello</a> 
 
    <a href="#">Hello</a> 
 
</div>

Answer 4

には、パディングを追加：あなたのCSSへ0pt。

.content-nav { 
 
    height: ; 
 
    width: ; 
 
    background: ; 
 
    text-align: center; 
 
    padding: 10pt 
 
} 
 

 
.content-nav a { 
 
    color: #000; 
 
    padding: ; 
 
    text-decoration: none; 
 
    font-style: italic; 
 
    font-weight: bold; 
 
    font-size: 12pt; 
 
    background: red 
 
} 
 

 
.content-nav a:after { 
 
    content: " + "; 
 
    padding: 0 5pt 0 5pt; 
 
    color: rgb(246, 22, 66) 
 
} 
 

 
div.content-nav a:last-child:after { 
 
    content: ""; 
 
    padding: 0pt 
 
}

<div class="content-nav"> 
 
    <h1>Navigate the site</h1> 
 
    <a href="company.php" title="Company - (About Us, Projects)">company</a> 
 
    <a href="careers.php" title="Job Openings">careers</a> 
 
    <a href="contact.php" title="Contact Us">contact</a> 
 
    <a href="contact.php" title="Refer to Contact Page">support</a> 
 
    <a href="#">Hello</a> 
 
    <a href="#">Hello</a> 
 
</div>

Answer 5

あなたは適切なセレクタ.content-nav a:last-child:after を必要とする私はちょうど最後の要素のパディングを削除コード

.content-nav a:last-child:after { 
    padding: 0; 
} 

https://jsfiddle.net/v2vd92rz/