How to remove padding in content with pseudo content

Question

Why does the btn-close-sidebar still have padding on the bottom while I have set padding: 0px !important; and margin: 0px !important; on its pseudo content?

.btn-close-sidebar {
  background: red!important;
  padding: 0px !important;
  margin: 0px !important;
}

.btn-close-sidebar::after {
  background: green;
  content: "";
  background-image: url("data:image/svg+xml,<svg class='bi bi-arrow-bar-right' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' d='M10.146 4.646a.5.5 0 01.708 0l3 3a.5.5 0 010 .708l-3 3a.5.5 0 01-.708-.708L12.793 8l-2.647-2.646a.5.5 0 010-.708z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M6 8a.5.5 0 01.5-.5H13a.5.5 0 010 1H6.5A.5.5 0 016 8zm-2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 2rem 2rem;
  display: inline-block;
  width: 30px;
  height: 32px;
  margin: 0px !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container p-5"><button type="button" class="btn btn-close-sidebar"></button>

Answer 1

1. Replace to display:block; in .btn-close-sidebar::after {...}
2. Don't use important unless if that is last option.

.btn-close-sidebar {
  background: red!important;
  padding: 0px !important;
  margin: 0px !important;
}

.btn-close-sidebar::after {
  display: block;
  background: green;
  content: "";
  background-image: url("data:image/svg+xml,<svg class='bi bi-arrow-bar-right' width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' d='M10.146 4.646a.5.5 0 01.708 0l3 3a.5.5 0 010 .708l-3 3a.5.5 0 01-.708-.708L12.793 8l-2.647-2.646a.5.5 0 010-.708z' clip-rule='evenodd'/><path fill-rule='evenodd' d='M6 8a.5.5 0 01.5-.5H13a.5.5 0 010 1H6.5A.5.5 0 016 8zm-2.5 6a.5.5 0 01-.5-.5v-11a.5.5 0 011 0v11a.5.5 0 01-.5.5z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 2rem 2rem;
  width: 30px;
  height: 32px;
  margin: 0px !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container p-5"><button type="button" class="btn btn-close-sidebar"></button>

Answer 2

:after pseudo-element is display inline by default. Bootstrap set a line-height to 1.5 rem on .btn class. You can set 0 this property:

.btn-close-sidebar {
  line-height : 0;
  / ...
}

Or set display to block on pseudo-element:

.btn-close-sidebar::after {
  display: block;
  / ...
}