移除:: after CSS伪元素周围的边框/边距

Question

我如何删除:: after css pseude元素周围的组织边界，就像我在下面的小提琴中张贴的内容一样

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>

也可以在 here 中看到。