Как разместить блок внутри псевдоэлемента?

Question

[Сергей Золотарёв]

Добрый день!
Сейчас решаю очень непростую задачу, суть которой я изложу:

Для внешнего дива нужно создать два псевдо элемента (before, after) и внутренний див, в котором будет находиться контент этот плашки. Внешнему и внутреннему задать позицию relative, а псевдо - absolute, и также разместить псевдо за внутренним дивом с помощью z-index. Ну и нужным элементам задать box-shadow

Пробовал такое реализовывать с помощью CSS и не дал никакого результата. Про псевдоэлементы я много знаю, но на таких фокусах в жизни с ними я не практиковался.
Сама структура блоков div выглядит так:

<div class="promo-feed">
   <div class="promoblock"></div>
   <div class="promoblock"></div>
   <div class="promoblock"></div>
   <div class="promoblock"></div>
   <div class="promoblock"></div>
   <div class="promoblock"></div>
   <div class="promoblock"></div>
   <div class="promoblock"></div>
   <div class="promoblock"></div>
</div>

<div class="popular-objects">
   <div class="popular-object"></div>
   <div class="popular-object"></div>
   <div class="popular-object"></div>
   <div class="popular-object"></div>
   <div class="popular-object"></div>
   <div class="popular-object"></div>
   <div class="popular-object"></div>
   <div class="popular-object"></div>
   <div class="popular-object"></div>
</div>

Устроен пример так:

• Здесь 2 внешних дива, состоящие из классов promo-feed и popular-objects
  
• Внутри первого дива живут блоки с классом promoblock, а внутри второго - popular-object
  
• И в этих дивах нужно решить задачу, в помощи по решении которой я очень сильно нуждаюсь и используя просто CSS
  

Какие варианты существуют для этого? Вы с такими задачами сталкивались и какие ваши варианты решения задачи давали хороших результатов?

Заранее вам спасибо за помощь!

Comments

[Rustam Bainazarov]

Как это должно выглядеть в итоге?

[Сергей Золотарёв]

Рустам Байназаров, в соответствии с макетом из ТЗ:


Вот эти два дива из макета, о которых я вам говорю, должны выглядеть так!

[Максим]

Сергей Золотарёв, ' вы про затемнения сзади ?

[Сергей Золотарёв]

Максим Ленский, да

[Сергей Золотарёв]

Максим Ленский, вы правы и я с вами согласен. Вот это и надо правильно сформировать с помощью CSS и тех самых псевдоэлементов.

[Максим]

Сергей Золотарёв, это обычные псевдоэлементы - after и before но можно и реальные div затолкать под родителя и стилизовать как shadow

[Максим]

Сергей Золотарёв, вы не можете это сделать ? я через полтора часа буду дома - если хотите то я покажу но ни здесь у вас на компе по удалёнке - так хотите ?

[Сергей Золотарёв]

Максим Ленский, мне нужно быстро это сделать и буду вам благодарен!

[Максим]

Сергей Золотарёв, в личке email скачайте anydesc и на почту напишите logim через полтора часа подключусь

[Сергей Золотарёв]

Максим Ленский, спасибо. Но один пользователь сейчас помогает мне с решением данной задачи

[Rustam Bainazarov]

Сергей Золотарёв.

Answer 1

[Вадим]

Как один из вариантов:
Тени и отступы уже подкрутите на своё усмотрение.

Comments

[Сергей Золотарёв]

Мне ваш ответ помог, но с приносящими проблемами:

• Код страницы, где возникла проблема(так как она ис...
  
• Код стилей для основных элементов и самой страницы
  
• Стили, где я решаю данную задачу
  

[Вадим]

Сергей Золотарёв, не совсем понятно по скринам что за проблема

[Сергей Золотарёв]

Вадим, вывелась пустота. А до этого всё работало отлично

[Вадим]

Сергей Золотарёв, не вижу где бы Вы взяли предложенный код.

Если это

#promo > main.swiper-container .promo-feed .promoblock::before, #investsearch > main.swiper-container .popular-objects .popular-object::before{
    content: '';
    position: absolute;
    z-index: -2;
    pointer-events: none;
    background-color: white;
    box-shadow: inherit;
    width: 100%;
    height: 100%;
    display: inline-flexbox;
}

То где позиционирование?
Где стили для обёртки контента?

[Сергей Золотарёв]

Почти в соответствии с вашим вариантом реализовывал для двух внешних блоков. На стили для обёртки контента не обращал внимание...

[Сергей Золотарёв]

Но здесь вы можете изучить и посмотреть то, о чем вам говорил, чтобы вы могли мне помочь и здесь доступно только то, что раньше хорошо работало до выявления проблемы.

[Вадим]

Сергей Золотарёв, Чтобы применить предложенное решение нужно обернуть контент, скажем, promoblock
в дополнительный div, и сделать так, чтобы высота у промоблока была не по высоте контента.

HTML

<div class="promoblock swiper-slide swiper-slide-next" data-swiper-slide-index="1" role="group" aria-label="11 / 27" style="margin-right: 30px;/* position: relative; *//* z-index: 1; *//* width: 100%; *//* height: 440px; *//* background-color: white; *//* box-shadow: 0 0 5px 1px gray; */">
    <div class="promoblock__content">
                        <header>
                            <a href=""><strong>Factorys</strong>(92)</a>
                        </header>
                        <main>
                            <span class="location">
                                Austria
                            </span>
                            <img src="https://lyubimiigorod.ru/web/v2assets/img/noImg_2-1.jpg" alt="Not image">
                        </main>
                        <footer>
                           <div class="info">
                                <span>Austria, a plant for the production of sausages...</span>
                                <span>&nbsp;</span>
                                <span>$ 10 300 000</span>
                            </div>
                            <div class="raiting">
                                <span>Expert Raiting</span>
                                <div class="rating-mini">
                                    <span class="active"></span>	
                                    <span class="active"></span>    
                                    <span class="active"></span> 
                                    <span class="active"></span>	
                                    <span class="active"></span>    
                                    <span class="active"></span>
                                    <span class="active"></span>    
                                    <span></span>
                                    <span></span>    
                                    <span></span>
                                </div>
                            </div>
                        </footer>
                    </div></div>

CSS

#promo > main.swiper-container .promo-feed .promoblock {
    position: relative;
    z-index: 1;
    height: 440px;
    box-shadow: 0 0 5px 1px grey;
}

.promoblock__content {
    position: absolute;
    top: 10px;
    left: -10px;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 1;
    padding: 10px 10px 10px 0;
    box-sizing: border-box;
    box-shadow: inherit;
}

.promoblock::before {
  content: '';
  pointer-events: none;
  position: absolute;
  top: 5px;
  left: -5px;
  z-index: -2;
  width: 100%;
  height: 100%;
  background-color: white;
  box-shadow: inherit;
}

Результат

[Сергей Золотарёв]

Вадим, спасибо вам за помощь! Но вы позже можете обновить страницу, ссылку на которую я вам прислал.

[Сергей Золотарёв]

Вадим, но я жду от вас вердикта по поводу того, насколько я воспользовался вашим вариантом! Хоть как получилось с этим

[Вадим]

Сергей Золотарёв, Если по ссылке уже обновлённый вариант, то не увидел заданных стилей для promoblock_content и теней. У Вас получилось только одна рамка сзади, а по дизайну у Вас вроде как 2.

[Сергей Золотарёв]

Проблема в том, что promoblock_content находится внутри блока promoblock и из-за этого он не видит стили.
Стили у меня реализованы так:

#promo > main.swiper-container .promo-feed .promoblock + .promoblock__content {
  position: absolute;
  top: 10px;
  left: -10px;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 1;
  padding: 10px 10px 10px 0;
  box-sizing: border-box;
  box-shadow: 0 0 5px 1px grey;
}

А если уберу плюс в селекторе, сам блок перестанет показывать...

[Сергей Золотарёв]

Пример структуры promoblock_content на HTML в соответствии с вашим вариантом из браузера:

<div class="promoblock swiper-slide">
                        <div class="promoblock_content" style="background-color:white;">
                            <header>
                                <a href=""><strong>Factorys</strong>(92)</a>
                            </header>
                            <main>
                                <span class="location">
                                    Austria
                                </span>
                                <img src="https://lyubimiigorod.ru/web/v2assets/img/noImg_2-1.jpg" alt="Not image">
                            </main>
                            <footer>
                            <div class="info">
                                    <span>Austria, a plant for the production of sausages...</span>
                                    <span>&nbsp;</span>
                                    <span>&dollar; 10 300 000</span>
                                </div>
                                <div class="raiting">
                                    <span>Expert Raiting</span>
                                    <div class="rating-mini">
                                        <span class="active"></span>	
                                        <span class="active"></span>    
                                        <span class="active"></span> 
                                        <span class="active"></span>	
                                        <span class="active"></span>    
                                        <span class="active"></span>
                                        <span class="active"></span>    
                                        <span></span>
                                        <span></span>    
                                        <span></span>
                                    </div>
                                </div>
                            </footer>
                       </div>
                    </div>

[Вадим]

Сергей Золотарёв, так правильно, + означает "следующий" элемент. А у Вас не следующий, а вложенный.
И опять же, всё верно, если убрать + то стили применяются для promoblock_content.
Изучите предоставленный выше CSS, который под спойлером. Там отдельно стили для promoblock и отдельно для promoblock_content.
В вашем случае, если Вы хотите чтобы у них была одинаковая специфичность, то примерно так:

#promo > main.swiper-container .promo-feed .promoblock {
    position: relative;
    z-index: 1;
    height: 440px;
    box-shadow: 0 0 5px 1px grey;
}

#promo > main.swiper-container .promo-feed .promoblock .promoblock__content {
    position: absolute;
    top: 10px;
    left: -10px;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 1;
    padding: 10px 10px 10px 0;
    box-sizing: border-box;
    box-shadow: inherit;
}

#promo > main.swiper-container .promo-feed .promoblock .promoblock::before {
  content: '';
  pointer-events: none;
  position: absolute;
  top: 5px;
  left: -5px;
  z-index: -2;
  width: 100%;
  height: 100%;
  background-color: white;
  box-shadow: inherit;
}