Background у before не перекрывает background у родителя. Как исправить?

Question

[Dubrovin]

Песочница: https://jsfiddle.net/s0bf7yrt/
Проблема: при наведении на кнопку цвет фона у элемента before не перекрывает белый цвет у родителя и появляются артефакты на краях
Пожалуйста, подскажите, как это можно исправить не меняя вёрстку?
p.s. Цвет у родителя может быть градиентным, так же как и цвет у before, при этом при наведении должен быть плавный эффект изменения фона с одного градиента на другой (или с одного цвета на другой)

Answer 1

[Арсений Матыцин]

Натяни за край, аки одеяло.

Comments

[Dubrovin]

Тогда кнопка меняет геометрию (становится больше в высоту на 2px и в ширину на 2px), что не допустимо, размеры кнопки должны оставаться прежними

[Dubrovin]

При этом, если задать кнопке overflow: hidden, то баг сохраняется.

[Арсений Матыцин]

Dubrovin, это допустимо, если знаешь свойство overflow.

Но тут другая проблема, я с ней сталкивался и сейчас пытаюсь вспомнить как решил.

[Dubrovin]

Арсений Матыцин, я сразу скажу, что есть вариант background-clip: content-box у родителя, но это не вариант, т.к. он ломает геометрию фона у родителя. Также есть вариант прозрачного фона родителя при ховере на кнопку, но тогда фон начинает мигать при наведении

[Арсений Матыцин]

Dubrovin, вспомнил, точнее откопал код. Было без анимации и решалось точной подгонкой, вплоть до шуршания точками после запятой.

А тебе дешевле в данном кейсе будет решить так https://jsfiddle.net/q4p5y3wa/3/, или вообще просто анимировать фон самого поля.

[Dubrovin]

Арсений Матыцин, да, если цвет у поля не градиентный, то это сработает, но если градиент, то эффекта перехода не будет

[Арсений Матыцин]

Dubrovin, у тебя еще есть :after.

[Dubrovin]

Арсений Матыцин, да, это, конечно, я в курсе)) after уже занят, к сожалению. В соседней ветке предложили решение, и оно, в принципе, мне нравится. Спасибо за помощь

[Арсений Матыцин]

Dubrovin, нус, вообще кроме псевдоэлементов есть еще и обычная разметка, я удивляюсь порой, когда до нее не доходят.

И не за что. Обращайтес.

Answer 2

[Odisseya]

Костыльный способ:

.button:hover::before {
  background-color: black;  
  box-shadow: 0 0 1px 0 currentColor, inset 0 0 1px 0 currentColor;
}