Как сделать отступ иконки - PullRequest
Новая
       13

Как сделать отступ иконки

0 голосов
/ 18 декабря 2018

У меня есть текст, и когда я нажимаю на иконку, я могу read more, а когда нажимаю на другую иконку, я могу read less.Вопрос в том, как сделать отступ сверху, чтобы читать больше и меньше читать иконки, чтобы видеть их ниже, чем текст, и делать их (иконки) в центре?Значки +, -.

Это HTML: 

 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
<input id="read-more-state-1" class="read-more-state" type="checkbox">
<span class="read-more-target">
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
</span>
<label for="read-more-state-1" class="read-more-button">
<span class="read-more-button-icon"></span>
</label>
</p>

Это CSS: 

.read-more-state {
  display: none;
}

.read-more-button {
  display: none;
}

@media only screen and (max-width: 600px) {   
  .read-more-target {
    opacity: 0;
    font-size: 0;
    transition: .25s ease;
  }

  .read-more-button {
    display: inline-block;
    border-radius: 0.25em;
    width: 1em;
    height: 1em;
    background: url(img/arrow%20grad.svg);
    background-size: cover;
    cursor: pointer;
  }

  .read-more-state:checked + .read-more-target {
    opacity: 1;
    font-size: inherit;
  }

  .read-more-state:checked ~ .read-more-button {
    background: url(img/arrow%20up%20grad.svg);
    background-size: cover;
    cursor: pointer;
  }
}

1 Ответ

0 голосов
/ 18 декабря 2018

Если вы хотите, чтобы значки + и - отображались по центру и ниже текста, проще всего было бы расположить элемент p относительно, а значки - абсолютные.

p{
  position: relative;
  padding-bottom: 1.5em;
}
.read-more-button {
  position: absolute;
  bottom: 0px;
  left: 50%;
}

Вот ссылка codepen .

...