Brad9aga

Потому что селекторы атрибутов и псевдоклассов имеют одинаковую специфичность, а :hover у вас расположен выше.

Вообще, лучше это делать с помощью SVG.

Если нужно на CSS — то вот, но читай комментарии. Там ряд хаков используется. Сжимай окно по ширине, чтобы увидеть, что блоки текста сохраняют свои размеры и позиционирование относительно общего родителя:

Нужно подключить jQuery

Вам очень повезло, ибо в данном случае в CSS есть псевдокласс :focus-within. Он позволяет стилизовать предка, внутри которого поле в фокусе (спасибо Xdevelx за поправку терминологии, см. комментарии). Поддержка нормальная у него:
https://caniuse.com/#search=%3Afocus-within


Во всех остальных случаях пока что CSS не может идти выше по коду. Если нужно универсальное решение с поддержкой IE и старых EDGE — только JS.

:has — только в черновиках, ни в одном браузере его поддержки нет:
https://caniuse.com/#search=%3Ahas

https://learn.javascript.ru/dom-navigation

.allLogo:hover .transform {transform: rotate(360deg) scale(0.5) }

.text::after {
  content: '';
  position: absolute;
  left: 23px;
  top: -10px;
  width: 16px;
  height: 16px;
  background: #f2fbff;
  border: 1px solid transparent;
  border-top-color: #cfcfcf;
  border-left-color: #cfcfcf;
  transform: rotate(45deg);
}

Если Вы используете код ответа к этому вопросу, то для родителя нужно поменять свойство justify-content: space-between; на justify-content: flex-start;

Результат:
https://codepen.io/hisbvdis/pen/aeRaGN

C телефона было сложно, но примерно так:


Как правильно отметил Brad9aga в своем примере, лучше первую и последнюю полоски сдвигать, так лучше выглядит:

1. Псевдоэлементом с transform rotate https://jsfiddle.net/5jobc9q7/ (угол, положение поставьте свои, псевдоэлемент примените к одному из внутренних блоков)
2. Градиентом
3. SVG
4. Просто картинкой

Используйте абсолют.
С трансформом место остается зарезервированным.

Начиная с левого верхнего угла задается закругление блока.
Значения, заданные через /, определяют горизонтальные и вертикальные радиусы. Свойство не наследуется.
Тут подробно описано - https://html5book.ru/css3-borders/

.vline {
  display: block
  width: 2px
  height: 50px
  background-color: black
}

https://jsfiddle.net/u2qgt5pj/