Pseudo Element Before / After

Question

I'm using an image to the left of a link.
Right now, I use the ::before attribute for the image to show, however it shows slightly above the link.

I need to have it aligned. Here's a pic: Link

The code I'm using is:

 .vocabulary-duration::before {
     content: "";
     float: left;
     font-family: "FontAwesome";
     font-size: 18px;
     padding-right: 0.5em;
 }

Answer 1

You can remove the float and use inline or inline-block and then use vertical-align

.vocabulary-duration::before {
  content: "";
  font-family: "FontAwesome";
  font-size: 18px;
  padding-right: 0.5em;
  vertical-align: middle;
  display: inline-block;
}

<div class="vocabulary-duration">asdf</div>