как менять местами слова в вертикальной строке

Question

Как можно сделать, чтобы при выводе строка выводилась RU | ENG, как бы слова менялись наоборот, при этом сама html строка не изменилась, изменения были только в css.

 .table {
position: relative;
top:-10px;
color: #070707;
    }
  
    .eng {
     color:#828282;
    }
    
    .language{
     margin:2em;
     font-weight:700;
     font-size:36px;
     font-family:sans-serif;
    transform-origin:left top;
    transform-box:fill-box;
    transform: rotate(90deg); 
    
  }

 <div class="language" id="language">
                    <span class="eng"> ENG</span> | RU
                </div>

Answer 1

Если всё таки есть возможность поменять HTML, то можно сделать так:

document.addEventListener('click', function(e) {
  document.querySelector('.language').classList.toggle('active');
});

:root {
  --nonactive: #828282;
  --active: #070707;
}

.language {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 2em;
  font-weight: 700;
  font-size: 36px;
  font-family: sans-serif;
  transform-origin: left top;
  transform-box: fill-box;
  transform: rotate(90deg);
}

.language .-sep {
  white-space: pre;
  color: var(--active);
}

.language:not(.active) .eng {color: var(--nonactive);}
.language:not(.active) .ru {color: var(--active);}

.language.active .eng {color: var(--active); order: 2;}
.language.active .ru {color: var(--nonactive); order: -1;}

<div class="language active" id="language">
  <span class="eng">ENG</span>
  <span class="-sep"> | </span>
  <span class="ru">RU</span>
</div>

JS используется для демо, по нажатию на страницу он будет добавлять\удалять класс с блока .language.

БЛОГ НА HUSL

как менять местами слова в вертикальной строке

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