Why doesn't ::before apply?

Question

css

Hello. I look through the inspector, the code is not applied, that is, there is no pneudoclass on the link. Why?

<h1>Подключение</h1>
            <a href="#0" class="cd-panel-close">Close</a>

.cd-panel-close {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 60px;

  /* image replacement */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;

  &::before, &::after {
    /* close icon created in CSS */
    position: absolute;
    top: 22px;
    left: 20px;
    height: 3px;
    width: 20px;
    background-color: $color-3;
    /* this fixes a bug where pseudo elements are slighty off position */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  &::before {
    @include transform(rotate(45deg));
  }

  &::after {
    @include transform(rotate(-45deg));
  }

  .no-touch &:hover {
    background-color: $color-3;

    &::before, &::after {
      background-color: $color-4;
      @include transition-property(transform);
      @include transition-duration(.3s);
    }

    &::before {
      @include transform(rotate(220deg));
    }

    &::after {
      @include transform(rotate(135deg));
    }
  }
}

Answer 1

All :before , :after must always have content: '' ; Either with an empty value, or with the text you need! Otherwise, the element will not be displayed!