Как правильно сверстать в этой ситуации?

Question

[TyllerDurden]

Здравствуйте. По умолчанию .post__text скрыт и становится видимым при наведении на .post__title. Но у .post__title есть псевдоэлемент ::after, растянутый на весь .post, чтобы при клике на любом месте .post был переход по ссылке. Из-за этого и .post__text становится видимым при наведении на любое место, а не только на текстовую часть .post__title, как мне нужно. Как быть в этой ситуации? Вариант со вторым тегом "a" и с javascript не предлагать. В остальном верстку можно менять как угодно.

<div class="post" >
	<div class="post__wrapper">
		<div class="post__content">
			<a href="#" class="post__title">Заголовок</a>
			<div class="post__text">какой-то текст</div>
			<div class="post__meta"></div>
		</div>
       </div>
</div>

.post__title {
    display: block;
    max-height: 59px;
    overflow: hidden;
    font-size: 18px;
    color: var(--color-link);
}

.post__title::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.post__text {
    display: none;
    line-height: 25px;
    font-size: 16px;
    font-weight: 300;
    color: rgb(255 255 255 / 60%);
    margin-top: 5px;
}

.post__title:hover + .post__text {
    display: block;
    position: absolute;
    z-index: 9999;
    width: 60%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #292727;
    background: #000;
    margin-left: 30px;
}

Comments

[imko]

Ну если весь пост ссылка - сделай пост ссылкой и не городи костылей

[TyllerDurden]

imko, а по теме есть что сказать? Без советов что мне делать ссылкой.

[leeroyjenkins176]

Для современных браузеров с поддержкой has()
Не проверял, но по идее должно сработать

<a href="#" class="post__title"><span class="post__title-text">Заголовок</span></a>

.post:has(.post__title-text:hover) .post__text {
	display: block;
}
.post__title-text {
	position: relative;
	z-index: 2;
}

[TyllerDurden]

leeroyjenkins176, круто! Благодарю. Да, все работает как нужно. Тогда сделаю для современных браузеров так, а для старых уберу .post__title::after. Если хотите, вынесите ваш комментарий в качестве ответа на вопрос. Я отмечу его решением.

[imko]

TyllerDurden, в смысле по теме? ты связи не видишь? у тебя ссылка вся карточка я говорю сделай тэгом ссылки карточку))

[TyllerDurden]

imko, забей.

Answer 1

[xqdbpx]

Самый простой способ: Сделать некликабельной ту часть заголовка, которая отвечает за появление текста. Для этого можно использовать специальный трюк с 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;
}

По идеи так должно пахать не тестил мож жпт спросить