How To Align Pseudo Element :before :after And Span Element

I am practicing pseudo element and want to insert an image before a span on my custom button. First, I create a custom button without pseudo element and everything is align center.

Solution 1:

Just give vertical-align: middle; to .x-btn-inner::before to make it align proper.

.x-box-item {
  border: 1px solid black;
  width: 300px;
  height: 50px;
  position: absolute;
  right: auto;
  left: 0px;
  margin: 0px;
}
.x-btn-wrap {
  width: 100%;
  height: 100%;
  display: table;
}
.x-btn-button {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  white-space: nowrap;
}
.x-btn-inner {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
}
.x-btn-inner:before {
  content: '';
  width: 50px;
  height: 50px;
  background-image: url("https://gradschool.uoregon.edu/sites/gradschool1.uoregon.edu/files/facebook-like-icon-small.png");
  display: inline-block;
  background-size: 50px 50px;
  vertical-align:middle;
}

<a class="x-box-item" onClick="alert('Hello World!')">
  <span class="x-btn-wrap">
    <span class="x-btn-button">
      <span class="x-btn-inner">
      LIKE
      </span>
  </span>
  </span>
</a>