Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="grid-50">
  <div id="book-design" class="image-right-after">
  <h1>Testing</h1>
  <p>testing the text testing the text testing the text testing the text testing the text testing the text testing the text testing the text testing the text testing the text </p>
  <p><a href="#">button</a></p>
  </div>
</div>

<div class="grid-50">
  <div id="book-design-2" class="image-left-after">
  <h1>Testing</h1>
  <p>testing the text testing the text testing the text testing the text testing the text testing the text testing the text testing the text testing the text testing the text </p>
  <p><a href="#">button</a></p>
  </div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

.grid-50 {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  min-height: 200px;
  padding: 5rem 0;
  position: relative;
}
.image-right-after {
  &:after {
    background-repeat: no-repeat;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
  }
}
.image-left-after {
  &:after {
    background-repeat: no-repeat;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
}

#book-design {
  &:after {
    background-image: url('http://placehold.it/200x250');
    height: 250px;
    width: 200px;
    right: -225px;
  }
}

#book-design-2 {
  &:after {
    background-image: url('http://placehold.it/200x250');
    height: 250px;
    width: 200px;
    left: -225px;
  }
}

SassMeister-output.css

.grid-50 {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  min-height: 200px;
  padding: 5rem 0;
  position: relative;
}

.image-right-after:after {
  background-repeat: no-repeat;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}

.image-left-after:after {
  background-repeat: no-repeat;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

#book-design:after {
  background-image: url("http://placehold.it/200x250");
  height: 250px;
  width: 200px;
  right: -225px;
}

#book-design-2:after {
  background-image: url("http://placehold.it/200x250");
  height: 250px;
  width: 200px;
  left: -225px;
}

SassMeister-rendered.html

<div class="grid-50">
  <div id="book-design" class="image-right-after">
  <h1>Testing</h1>
  <p>testing the text testing the text testing the text testing the text testing the text testing the text testing the text testing the text testing the text testing the text </p>
  <p><a href="#">button</a></p>
  </div>
</div>

<div class="grid-50">
  <div id="book-design-2" class="image-left-after">
  <h1>Testing</h1>
  <p>testing the text testing the text testing the text testing the text testing the text testing the text testing the text testing the text testing the text testing the text </p>
  <p><a href="#">button</a></p>
  </div>
</div>