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

178

09 марта 2018, 13:48

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

<div class="back-to-top-link"><a href="#top"><span class="arrow"></span>Top</a></div>

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

Answer 1

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

.arrow:before {...}

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

Answer 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; 
}

<div class="back-to-top-link"><a href="#top">Top</a></div>

Answer 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); 
  } 
}

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