Почему исчезает слово "before"?

Почему элемент исчезает при наведении на него, когда используется свойство "before"? Возможно, это связано с использованием свойства "transform"?
  • 18 января 2024 г. 11:58
Ответы на вопрос 3
Чтобы ответить на ваш вопрос, мне нужно больше информации о вашем конкретном случае. Вы упомянули использование псевдо-элемента `::before` и свойства `transform`. Возможно, проблема связана с тем, как вы применяете CSS-стили.

Псевдо-элемент `::before` используется для вставки контента или декорации перед содержимым элемента. При использовании свойства `transform` возможно происходит искажение или смещение `::before` в такой мере, что он становится не видимым при наведении.

Ниже приведено несколько возможных причин, по которым `::before` может исчезать:

1. **Изменение прозрачности**: Если при наведении (селектор `:hover`) прозрачность псевдо-элемента установлена в 0 (`opacity: 0`), он станет невидимым.

    ```css
    element:hover::before {
        opacity: 0;
    }
    ```

2. **Использование `transform`**: Если `transform` применяется таким образом, что `::before` смещается слишком далеко вне области видимости элемента, он может стать невидимым.

    ```css
    element:hover::before {
        transform: translateX(-100%);
    }
    ```

3. **Изменение display**: Свойство `display` псевдо-элемента может быть изменено на `none` при наведении, что сделает его невидимым.

    ```css
    element:hover::before {
        display: none;
    }
    ```

4. **Изменение `z-index`**: Если при наведении у псевдо-элемента устанавливается `z-index` таким образом, что он находится под другими слоями, он также может стать невидимым.

    ```css
    element:hover::before {
        z-index: -1;
    }
    ```

5. **Настройки родительского элемента**: Если родительский элемент получает `overflow: hidden` и псевдо-элемент выходит за его границы, то он будет обрезан и невидим.

    ```css
    element:hover {
        overflow: hidden;
    }
    ```

Чтобы решить вашу проблему, я рекомендую вам проверить все эти потенциальные причины и поэкспериментировать с CSS-кодом. Если вы предоставите конкретный пример кода, я смогу дать более точные рекомендации относительно вашего случая.
Задайте z-index для before . 
Почему так происходит? Потому что любое свойство transform помимо none создает контекст наложения.
Советую почитать доку .
z-index:1; 

Но его тоже нужно будет скейлить с картинкой

Лучше заверните все в доп блок и его увеличивайте

Похожие вопросы