Swap text in Pure CSS-Checkbox-label when checked

I have this Pure-CSS accordion I like but there is one feature I would like to add to it: I would like the labels to change depending on the checkbox state AND to achieve this without JavaScript.

So,

• If the checkbox is unchecked I'd like the question text to read as "more info",
• If the checkbox is checked for the question text to read "less info".

I don't care what kind of elements you use per se.. you don't have to have the label element be the element that changes. However, It is important that the solution continues to allow the user to open the accordion by either clicking the text in the label element or the plus-sign inside of class plus trigger the toggle. The answer needs to also be free of JavaScript.

One note: solutions that avoid adding pseudoelements will be preferred over ones that do.

I'm eager to see if this can be done! Thanks! This is the codepen: http://ift.tt/2lTEsHo

This is the snippet:

@import url(http://ift.tt/2lPZvea);
body {
  font-family: 'Open Sans';
  font-size: 1.5em;
  background: #eee;
}


.question-content {
  width: 80%;
  padding: 20px;
  margin: 0 auto;
  padding: 0 60px 0 0;
}


.question {
  position: relative;
  background: #8FBC8F;
  margin: 0;
  padding: 10px 10px 10px 50px;
  display: block;
  width:100%;
  cursor: pointer;
}

.answers {
  background: #999;
  padding: 0px 15px;
  margin: 5px 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  position: relative;
  opacity: 0;
  -webkit-transition: .7s ease;
  -moz-transition: .7s ease;
  -o-transition: .7s ease;
  transition: .7s ease;
}

.questions:checked ~ .answers{
  height: auto;
  opacity: 1;
  padding: 15px;
}

.plus {
  position: absolute;
  margin-left: 10px;
  z-index: 5;
  font-size: 2em;
  line-height: 100%;
  -webkit-user-select: none;    
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
  pointer-events: none;
}

.questions:checked ~ .plus {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.questions {
  display: none;
}

<div class="question-content">
<div>
  <input type="checkbox" id="question1" name="q"  class="questions">
  <div class="plus">+</div>
  <label for="question1" class="question">
    More Info Q1
  </label>
  <div class="answers">
    What if the answer is really long and wraps the whole page and you never want to finish it but you have to because its the answer!
  </div>
</div>

<div>
  <input type="checkbox" id="question2" name="q" class="questions">
  <div class="plus">+</div>
  <label for="question2" class="question">
    More Info Q2
  </label>
  <div class="answers">
    short!
  </div>
</div>
  
<div>
  <input type="checkbox" id="question3" name="q" class="questions">
  <div class="plus">+</div>
  <label for="question3" class="question">
    More Info Q3
  </label>
  <div class="answers">
    This is the answer!
  </div>
</div>
</div>