Есть такой шаблон CSS/HTML
.block_navigation {
position: sticky;
top: 0;
padding-top: 20px;
margin-right: 5px;
display: flex;
padding-right: 5px;
height: calc(100vh - 20px);
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
border-right: 1px solid #2c2a37;
background-color: #1f1d2c;
z-index: 10
}
@media (min-width: 991px) {
.block_navigation {
width: 200px;
margin-right: 10px
}
.block_navigation+* {
margin-left: 5px
}
}
.bl_nav__text {
font-size: 18px;
margin-bottom: 5px;
font-weight: 500;
align-self: flex-start;
color: #ababab;
display: none
}
@media (min-width: 991px) {
.bl_nav__text {
display: block
}
}
.btn_menu {
position: relative;
width: 40px;
height: 40px;
margin-right: 10px;
border-radius: 4px;
border: 1px solid #1292f0;
background: 0 0;
order: -1;
align-self: flex-start;
margin-bottom: 10px;
cursor: pointer;
z-index: 2
}
.btn_menu:after {
left: 50%;
transform: translate(-50%, -50%);
background-image: url(../images/sprite.png);
background-position: 0 0;
width: 22px;
height: 18px;
z-index: 3
}
@media (min-width: 991px) {
.btn_menu {
display: none
}
}
.bl_nav {
position: relative;
width: 50px;
height: 100%
}
@media (min-width: 991px) {
.bl_nav {
padding-top: 0;
width: initial
}
}
@media (max-width: 450px) and (min-height: 600px) {
.bl_nav {
height: 95%
}
}
.bl_nav__list {
width: 100%;
margin: 10px auto 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
height: 100%;
min-height: calc(100vh - 135px)
}
@media (max-width: 450px) and (min-height: 600px) {
.bl_nav__list {
min-height: calc(100vh - 170px)
}
}
.menu-item {
position: relative;
display: block;
width: 45px;
margin-right: 5px;
margin-bottom: 5px
}
.bl_nav .menu-item:last-child,
.menu-item:last-child {
margin-top: auto
}
@media (min-width: 991px) {
.menu-item {
width: auto;
margin-right: 0
}
}
.bl_nav__link {
position: relative;
display: block;
font-size: 22px;
text-decoration: none;
transition: .15s ease-in;
color: #fff;
padding-left: 50px;
line-height: 50px;
white-space: nowrap
}
.bl_nav__link:focus,
.bl_nav__link:hover {
color: #69c5ff
}
.bl_nav__link:after,
.bl_nav__link:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px
}
.bl_nav__link:before {
background-color: #373443;
border-radius: 6px
}
@media (min-width: 991px) {
.bl_nav .bl_nav__link span {
width: auto;
display: block;
transform: scaleX(1);
}
}
.bl_nav__link span {
overflow: hidden;
transform: scaleX(0);
/* Почему это не работает */
}
.bl_nav__link.active {
color: #69c5ff
}
.btn_menu__checkbox:checked~.bl_nav .bl_nav__link span {
overflow: initial;
display: revert;
transform: scaleX(1);
background-color: #373443;
}
.btn_menu__checkbox:checked~.bl_nav span {
display: block;
}
.bl_nav .menu-item:last-child .bl_nav__link {
font-size: 17px;
}
.btn_nav__mobil {
position: absolute;
width: 40px;
height: 40px;
border: 1px solid #e1eaf0;
border-radius: 4px;
margin-top: -5px;
top: 6px;
right: 17px
}
.btn_nav__mobil:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(../images/sprite.png);
background-position: -50px -32px;
width: 10px;
height: 6px;
z-index: 2;
transition: .2s ease-in;
}
@media (min-width: 991px) {
.btn_nav__mobil {
display: none;
}
}
.block_tab__item a {
font-weight: 400;
font-size: 16px;
color: #2a3c90;
}
.block_tab__item a:focus,
.block_tab__item a:hover {
color: #fff;
}
.btn_navigation {
display: block;
}
.btn_menu__checkbox {
position: absolute;
top: 20px;
left: 0;
z-index: 2;
width: 40px;
height: 40px;
display: block;
opacity: 0;
}
@media (min-width: 991px) {
.btn_menu__checkbox {
display: none;
}
}
.btn_menu__checkbox:checked+.block_navigation {
transform: translateX(1);
}
.btn_menu__checkbox:checked~.btn_menu::after {
background-image: url(../images/sprite.png);
background-position: 0 -23px;
width: 18px;
height: 17px;
}
<div class="block_navigation">
<p class="bl_nav__text">Рубрика</p>
<input class="btn_menu__checkbox" id="topmenu" type="checkbox" aria-label="">
<nav class="bl_nav">
<ul class="bl_nav__list">
<li class="icon-it menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent"><a href="/it-tehnology/" class="bl_nav__link"><span>IT tehnology</span></a></li>
<li class="icon-jokes menu-item"><a href="/jokes/" class="bl_nav__link"><span>Jokes</span></a></li>
<li class="icon-authors menu-item"><a href="/author/" class="bl_nav__link"><span>Autors</span></a></li>
</ul>
</nav>
<label class="btn_menu" for="topmenu"></label>
</div>
Подскажите, почему не отрабатывает свойство
.bl_nav__link span {
overflow: hidden;
transform: scaleX(0);
}
Идея в том, что бы в мобильной адаптации, только нажав на "псевдокнопку" отображались подписи к иконкам навигации. Не понимаю почему transform: scaleX(0);
не скрывает мне эти надписи.