CSS - Read more collapsible button

<div class="row">

<div class="col-md-12">

<div id="module">

  <h3>Bacon Ipsum</h3>

  <p class="collapse" id="collapseExample" aria-expanded="false" aria-controls="collapseExample">

    Bacon ipsum dolor amet doner picanha tri-tip biltong leberkas salami meatball tongue filet mignon landjaeger tail. Kielbasa salami tenderloin picanha spare ribs, beef ribs strip steak jerky cow. Pork chop chicken ham hock beef ribs turkey jerky. Shoulder

    beef capicola doner, tongue tail sausage short ribs andouille. Rump frankfurter landjaeger t-bone, kielbasa doner ham hock shankle venison. Cupim capicola kielbasa t-bone, ball tip chicken andouille venison pork chop doner bacon beef ribs kevin shankle.

    Short loin leberkas tenderloin ground round shank, brisket strip steak ham hock ham.

  </p>

  <a role="button" class="collapsed" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">

  </a>

</div>

</div>

</div>

#module {

  font-size: 1rem;

  line-height: 1.5;

}

#module #collapseExample.collapse:not(.show) {

  display: block;

  height: 3rem;

  overflow: hidden;

}

#module #collapseExample.collapsing {

  height: 3rem;

}

#module a.collapsed::after {

  content: '+ Show More';

}

#module a:not(.collapsed)::after {

  content: '- Show Less';

}