Какой правильный способ оформить в данной ситуации?

Для того чтобы текст становился видимым только при наведении на текстовую часть .post__title, можно использовать псевдоэлемент :hover и задать стили для него. 

Пример CSS-кода:

```css
.post__title:hover {
  color: #000; /* Цвет текста */
}

.post__title:hover .post__content {
  display: block; /* Отображать текстовое содержимое */
}

.post__content {
  display: none; /* Скрыть текстовое содержимое по умолчанию */
}
```

В данном случае, при наведении на .post__title будет изменяться цвет текста и отображаться текстовое содержимое .post__content.

Самый простой способ: Сделать некликабельной ту часть заголовка, которая отвечает за появление текста. Для этого можно использовать специальный трюк с CSS. 
 Другой вариант: Разделить заголовок на две части: одна для текста, другая для кликабельной области. Это немного сложнее, но дает больше возможностей для дизайна. 
 
 Короче говоря, нужно немного подправить CSS, чтобы текст появлялся только при наведении на сам текст заголовка, а не на всю его область. 
 
 
<div class="post">
  <div class="post__title">
    <span class="post__title-text">Заголовок поста</span>
  </div>
  <div class="post__text">Текст поста</div>
</div>
 
 
.post__text {
  display: none;
}

.post__title-text:hover + .post__text {
  display: block;
}
 
 По идеи так должно пахать не тестил мож жпт спросить