HTML-CSS. Как добавить стрелку в этот код?

#html #css

Как добавить в span ::before, также как на скрине?

У меня в футере так:



Top




Из-за этого отсутствует стрелка...
    

Ответы

Ответ 1

Это псевдоэлемент. ::before нельзя добавить в html явно. Его используют в CSS таблицах
стилей. В вашем случае это будет примерно так:

.arrow:before {...}


Подробней о :before можно почитать тут.


Ответ 2

Через CSS:



* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #000;
}

.back-to-top-link {
  position: relative;
  width: 75px;
  background-color: lightgreen;
  text-align: center;
}

.back-to-top-link::before {
  content: "\2191";
  position: absolute;
  right: 10px;
  color: #000;
  top: 0;
}
Top


Ответ 3

.arrow:after {
  font-family: 'squarespace-ui-font';
  content: "^";
  font-weight: 900;
  color;
  #222;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding-top: 20px;
}

.arrow:hover:after {
  animation: move 1s infinite;
}

@keyframes move {
  100% {
    transform: translate(0, -10px);
  }
}




если так сделаете то появится вот такой элемент у вас