Как добиться с помощью стилей, чтобы он был прозрачный, а его дочернии элементы нет?

Question

[Dark Hole]

В связи с тем, что я делаю анимированный стиль, я обнаружил, что opacity его ::before не может быть больше его собственного. А мне позарез нужно, что бы сам элемент проявлялся, а его ::before бы изначально видимым. Есть какие-то решения? Или все-таки придется 2мя элементами делать?

Answer 1

[Max]

уточните задачу, если background интересует, то цвет через rgba (255,255,255,0.5) где 0.5 прозрачность. Какие элементы внутри и что надо сделать прозрачным

Comments

[Dark Hole]

Уточняю: в первую очередь текст

[Max]

abyrkov: я могу смоделировать с таким описанием кучу вариантов.
Есть блок, он должен быть прозрачным - прозрачность можно сделать через задник, как писал выше, можно задать внутри этого блока дополнительно opacity его элементов обращаясь к ним:
.div-opacity img{opacity:0.5;}
.div-opacity{background: rgba(255,255,255,0.5);}

Можно по идее и обратится к тексту в before:
.div-opacity:before p{opacity:1;}
если так не получается, то можно сменить верстку, если нельзя\не хотите, то можно проследить наследование.

Короче - нужно говорить предметно, можно код в студию (html + css)? Или хотябы описание структуры, что в них и т.п.

[Dark Hole]

Max:

.lol:hover{
    opacity: 1;
  }
  .lol{
    opacity: 0;
    transition-duration: 0.3s;
  }
  .progress:hover::before{
    opacity: 1;
    left: 0px;
  }
  .progress::before{
    opacity: 1;
    transition-duration: .3s;
    position: relative;
    left: 10px;
    content: '[';
  }

Приблизительно так стили выглядят

[Max]

abyrkov: так, начну с двух докопок - первое, сначала указывается сам .lol, потом его hover, before дальше указывается, потом hover:before. Собственно, тут есть .lol и .progress - это разные классы, наверное описались, везде поставил .lol , работает появление текста и выезжание скобочки влево.

[Max]

abyrkov: разобрался кажется в твоем вопросе. Вообще before и after идут внутри блока, скрывая блок - скрываешь и все внутри него, поэтому и предлагал с самого первого сообщения присваивать opacity отдельным элементам, есть альтернатива для задников и текста - цвет rgba.
Вот в этом примере, если ты хотел чтобы была [ при наведении на нее появлялся текст, делаешь не opacity, а color: rgba(0,0,0,0) и в hover, before, :hover:before color:rgba(0,0,0,1), вуаля текст появляется и скобка ездит, всегда видна.

[Котик Антон]

Max: .div-opacity:before p -- такого вообще быть не может

[Max]

27cm: да, погорячился. Может то конечно и можно, но тут придется уже извращаться со сложностью, через js например:)
Ошибку признаю.

[Dark Hole]

Max: это эксперимент, лень было после стили к одному сводить((

[Dark Hole]

Max: хорошо, попробую