Использование псевдоэлемента (:: before) в качестве цели ссылки перехода не работает в CSS - PullRequest
Новая
       121

Использование псевдоэлемента (:: before) в качестве цели ссылки перехода не работает в CSS

0 голосов
/ 14 июля 2020

У меня проблема при использовании псевдоэлемента (:: before) в качестве якорной ссылки, потому что страница не распознает его как якорь и продолжает переходить к самому разделу. Я пробовал все варианты, предложенные в блоге Николаса Галлахера , но, похоже, ничего не работает. Единственное отличие, которое я вижу в коде блога, заключается в том, что я использую flexbox, чтобы он был столбцом и обертывал содержимое.

Это CSS Я использую 

  #one, #two, #three {
  width: 5em;
  height: 5em;
  margin: 15em;
  display: flex;
  flex-flow: column wrap;
  background: blue;
}
#one::before, #two::before, #three::before {
    background: red;
    display: block;
    content: "";
    height: 150px;
    margin: -150px 0 0;
}

Спасибо!

....................................

РЕДАКТИРОВАТЬ: Готово! Уже найден более простой способ: наличие «пустого» (неразрывного пробела) якоря в том же разделе, невидимого для читателя и не сталкивающегося с полями верхней области.

HTML: 

<div id="red-container">
    <a name="red-target">&nbsp;</a>
    Hello World!
  </div>

CSS: 

#red-container {
  width: 5em;
  height: 5em;
  position: relative;
  margin: 1.5em;
  /** display and flex-flow are not neccesary, its just for visual context**/
  display: flex;
  flex-flow: column wrap;
  background: red;
}
#red-container a {
  position: absolute;
  left: 0px;
  top: -6.6em;
  border: solid 1px red;
}

А вот код в действии: https://codepen.io/JS3DX/pen/bGEjZbK?editors=1100. Кредиты на блог Calvin Spealman за ответ на этот вопрос.

...