Как можно изменять размер блока при наведении на него, и одновременно изменять его содержимое в конце?

Для изменения размера блока при наведении на него и изменения его содержимого в конце, вы можете использовать CSS псевдоклассы `:hover` и `:after` с помощью `content`. 

Вот пример CSS кода:

```
.block {
  width: 200px;
  height: 200px;
  background-color: blue;
  transition: width 0.5s, height 0.5s;
}

.block:hover {
  width: 300px;
  height: 300px;
}

.block:hover:after {
  content: "Новый текст";
  display: block;
  text-align: right;
}
```

В данном примере, при наведении на блок с классом "block", его ширина и высота изменятся с 200px до 300px с анимацией продолжительностью 0.5 секунды. Затем, при наведении на блок, с помощью псевдокласса `:after`, будет добавлен новый контент с текстом "Новый текст" и выравниванием справа.

Чтобы сохранить текстовое направление справа налево, вы можете использовать CSS свойство `text-align: right;` в классе или псевдоклассе, как в приведенном выше коде.

Проблема с переворачиванием текста была решена. Если вы хотите изменить содержимое текста и обернуть его в какую-то обертку, вы можете использовать следующий синтаксис: `
Ваш текст здесь
`. Чтобы перевернуть текст, вы можете использовать CSS свойство `transform` и применить к нему значение `scale(-1, 1)`.