Hover и After плохо работают

Question

Когда я навожу на текст, он должен меняться на другой , а также , в этом же блоке , должен появляться треугольник , я это сделал , но теперь с этим блоком твориться не понятное , в чем проблема, и еще почему-то треугольник этот появляется не в самом углу блока

.firstblock__item2 {
  background-color: #fff;
  height: 250px;
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: italic;
  font-size: 14px;
  line-height: 1.8;
  position: relative;
}

.firstblock__item2:hover:after {
  content: '';
  position: absolute;
  border: 20px solid transparent;
  border-top: 20px solid #76cdd8;
  border-right: 20px solid #76cdd8;
  left: 350px;
  top: 350px;
  color: #76cdd8;
}

<li class="firstblock__item2">"What are we doing? We help clients around the <br> world become competitive and stay <br> competitive. We combine best-in-class <br> software development with digital strategy and <br> experience design, business consulting and <br> technology innovation
  services.”</li>

Answer 1

треугольник этот появляется не в самом углу блока

У вас блок 400x250px, а "треуголник" позиционируете на 350x350, как думаете, почему он не в самом углу?

Раз вам нужно разместить его в правом-нижнем углу, воспользуйтесь right: 0; bottom: 0;, тогда он будет всегда в там углу находиться.

.firstblock__item2 {
  background-color: #fff;
  height: 250px;
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: italic;
  font-size: 14px;
  line-height: 1.8;
  position: relative;
}

.firstblock__item2:hover:after {
  content: '';
  position: absolute;
  border: 20px solid transparent;
  border-top: 20px solid #76cdd8;
  border-right: 20px solid #76cdd8;
  right: 0;
  bottom: 0;
  color: #76cdd8;
}

<li class="firstblock__item2">"What are we doing? We help clients around the <br> world become competitive and stay <br> competitive. We combine best-in-class <br> software development with digital strategy and <br> experience design, business consulting and <br> technology innovation services.”</li>

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

.firstblock__item2 {
  background-color: #fff;
  height: 250px;
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: italic;
  font-size: 14px;
  line-height: 1.8;
  position: relative;
}

.firstblock__item2:hover:after {
  content: '';
  position: absolute;
  border: 20px solid transparent;
  border-top: 20px solid #76cdd8;
  border-right: 20px solid #76cdd8;
  right: 0;
  top: 0;
  color: #76cdd8;
}

<li class="firstblock__item2">"What are we doing? We help clients around the <br> world become competitive and stay <br> competitive. We combine best-in-class <br> software development with digital strategy and <br> experience design, business consulting and <br> technology innovation services.”</li>

навожу на текст, он должен меняться на другой

Этой механики я не вижу, помочь с этим не могу, увы я не Ванга.

Answer 2

Вопрос решен

.firstblock__item2 {
   background-color: #fff;
   height: 250px;
   width: 400px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-style: italic;
   font-size: 14px;
   line-height: 1.8;
   position: relative;
   &:hover{
      color: #76cdd8;
      &::after{
         content: '';
      position: absolute;
      border: 20px solid transparent;
      border-top: 20px solid #76cdd8;
      border-right: 20px solid #76cdd8;
      right: 0;
      top: 0;
      }
   }
}

БЛОГ НА HUSL

Hover и After плохо работают

Ответы (2 шт):