0

https://codepen.io/yaroslav2292/pen/JxvMGm?editors=1100 Попробуйте нарушить путь картинки, чтобы картинка убралась с доски, тогда появится квадрат, но мне нужно, чтобы этот квадрат был рядом с картинкой и его было видно,а не чтобы он прятался за ней.

body {
  background-color: #000;
}

.granny-img {
  width: 20%;
  margin-top: 92px;
}

.granny-img::before {
  content: "";
  position: absolute;
  left: 175px;
  top: 250px;
  width: 300px;
  height: 325px;
  border: 2px solid #AFAFAF;
  z-index: 0;
}
<div class="header-img">
  <img class="granny-img" src="https://www.popsci.com/sites/popsci.com/files/styles/1000_1x_/public/images/2018/06/edinburgh_meadows_2008_middle_meadow_walk_by_catharine_ward_thompson.jpg?itok=ysmDaSjD&fc=50,50" alt="">
</div>

1 ответ 1

0

Проблема в том, что псевдоэлемент before задан для тега <img/>, который является самозакрывающимся (не имеет потомков, не содержит текст). Нежелательно использовать псевдоэлементы для подобных тегов - input,br,img и тд.

В данном случае лучше создать дополнительную обертку для тега img, или использовать существующий div с классом header-img, а затем позиционировать с помощью css.

body {
  background-color: #000;
}
.granny-img {
  width: 20%;
  margin-top: 92px;
}
.granny-img__wrap{
  position:relative;
}
.granny-img__wrap::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 325px;
  border: 2px solid #AFAFAF;
  z-index: 0;
}
    <div class="header-img">
<span class="granny-img__wrap">
      <img class="granny-img" src="https://www.popsci.com/sites/popsci.com/files/styles/1000_1x_/public/images/2018/06/edinburgh_meadows_2008_middle_meadow_walk_by_catharine_ward_thompson.jpg?itok=ysmDaSjD&fc=50,50" alt=""></span>
    </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.