删除 ::之后 css 伪元素周围的边框/边距

Question

如何删除 ：：after css 伪元素周围的 organge 边框，就像我在下面的小提琴中发布一样

http://jsfiddle.net/53ekh8ps/

#login_table tr:nth-child(n+2):nth-child(-n+4) td:first-child, #login_table tr:nth-child(2) td:nth-child(2) {
background:orange;
}
#login_table tr:nth-child(2) td:nth-child(2)::after {
content:"";
display:block;
height:100%;
background:black;
width:100%;
border-top-left-radius: 25px;
}

Answer 1

您需要将padding: 0添加到#login_table tr:nth-child(2) td:nth-child(2)：

body,
html {
width: 100%;
height: 100%;
background: black;
}
#login_table {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: auto;
width: 30%;
height: 50%;
font-size: 50%;
}
#login_table tr:first-child td,
#login_table tr:last-child td {
height: 10%;
background: red;
}
#login_table tr:nth-child(n+2):nth-child(-n+4) td:first-child,
#login_table tr:nth-child(2) td:nth-child(2) {
background: orange;
}
#login_table tr:nth-child(2) td:nth-child(2)::after {
content: "";
display: block;
height: 100%;
background: black;
width: 100%;
border-top-left-radius: 25px;
}
#login_table tr:nth-child(2) td:nth-child(2) {
padding: 0;
}

<table id="login_table">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

这也可以在这里看到。