CODEWITHSUNDEEP
htmlcss
Raymond Yeh
Raymond Yeh

Reputation: 285

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.

And then, I insert the pseudo element :before but the pseudo element and span can not align center anymore.

How to make them align?

Thanks

.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;
}
<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>

Upvotes: 0

Views: 2533

Answers (1)

ketan
ketan

Reputation: 19341

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>

Upvotes: 2

Related Questions