Как сделать часть текста кнопки не кликабельной?

Question

[Дмитрий]

Собственно вопрос простой. Как сделать часть текста кнопки не кликабельной, но при этом, этот текст (который не кликабельный) подвержен влиянию hover и focus. Сразу оговорю момент, с оборачиванием не кликабельного текста и кнопки в div элемент. Это полная ерунда, нормально работает только hover, но в focus попадает только кнопка, не кликабельный текст, остается без стилей.

Вангую! Наверное, можно применить focus-within, для решения этой проблемы (проблемы с focus, когда кнопка и текст обернуты в div), объединить hover и focus-within, но у меня мозгов не хватает это сделать, может это ошибочный путь. Какие есть варианты решения? Помогите, пж.

https://codepen.io/alex922/pen/bGgamXG

Comments

[Сергей delphinpro]

А можно по-человечески, на реальном примере понять что вам, блин, надо?

[Дмитрий]

Сергей delphinpro, Внизу есть ответ от другого пользователя, я его прокомментировал, прочитайте, сразу все поймете.

Answer 1

[ZB Venom]

Это то что Вы хотите? объяснение до ужаса непонятное

Comments

[Дмитрий]

Круто! Это то, что я хочу реализовать. Получается, это псевдокнопка, событие "вешается на" div элемент, вся эта конструкция не будет получать и обрабатывать focus.

[ZB Venom]

Дмитрий, Сделал все это кнопкой, что бы работало событие :focus

[Дмитрий]

ZB Venom, Не! Я это уже попробовал )) Focus кнопка получает, однако из-за того, что событие "вешается" на div-ы, когда кнопка получается focus ее нельзя нажать, нельзя вызвать событие.
Можно конечно решить через JS, условиями, но я хотел средствами CSS.

[ZB Venom]

Дмитрий, Извините не понял, вы говорите что на уже нажатую кнопку не нажать еще раз?

[Дмитрий]

ZB Venom, Отметил ваш ответ как решение. Однако! Решил проблему совершенно по другому, оказывается, в CSS есть свойство pointer-events, оно и помогло. Случайно увидел его в исходниках bootstrap компонента.
Спасибо за помощь! Удачи!