Элемент div с псевдоклассом :before не отображается на мобильных телефонах
Я делал сайт адаптивным, и оказалось, что один из элементов (волнистая линия) не отображается на мобильных телефонах. Однако он отображается, когда я проверяю размеры мобильных устройств в инструментах разработчика. Вот мой код:
.wavy-line {
width: 150px;
height: 50px;
overflow: hidden;
margin: 0 auto;
margin-top: 120px;
}
.wavy-line:before {
content: "xxxxxxxxxxxxxx";
position: relative;
top: -35px;
color: transparent;
width: calc(100% + 27px);
font-size: 45px;
text-decoration: wavy #194027 underline;
animation: animate 1.5s linear infinite;
-webkit-animation: animate 1.5s linear infinite;
}
@keyframes animate {
0% {
left: -0px;
}
100% {
left: -45px;
}
}
@-webkit-keyframes animate {
0% {
left: -0px;
}
100% {
left: -45px;
}
}
.wavy-line-green:before {
text-decoration-color: #194027;
}<div class = "wavy-line wavy-line-green"></div>я ничего не менял в медиазапросах
а еще вот ссылка на мой сайт: https://daryna-budz.github.io/tantillo/
спс заранее!
Я пытался изменить свойства ширины и отображения, но это ничего не дало.
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
51
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Часто стоит использовать https://caniuse.com/, чтобы проверить, поддерживается ли свойство.
В этом случае вы увидите, что необходим -webkit-, например. для IOS для реализации оформления текста.
Этот фрагмент добавляет это, и, похоже, он работает (протестировано на iPad IOS 16 Safari).
.wavy-line {
width: 150px;
height: 50px;
overflow: hidden;
margin: 0 auto;
margin-top: 120px;
}
.wavy-line:before {
content: "xxxxxxxxxxxxxx";
position: relative;
top: -35px;
color: transparent;
width: calc(100% + 27px);
font-size: 45px;
-webkit-text-decoration: wavy #194027 underline;
text-decoration: wavy #194027 underline;
animation: animate 1.5s linear infinite;
-webkit-animation: animate 1.5s linear infinite;
}
@keyframes animate {
0% {
left: -0px;
}
100% {
left: -45px;
}
}
@-webkit-keyframes animate {
0% {
left: -0px;
}
100% {
left: -45px;
}
}
.wavy-line-green:before {
text-decoration-color: #194027;
}<div class = "wavy-line wavy-line-green"></div>Другие вопросы по теме
Как переместить двоюродные элементы HTML только с помощью CSS
Почему скрытое переполнение CSS скрывает границы?
Текст обтравочного контура вокруг четверти круга (CSS)
Неправильная позиция привязки при использовании параметров позиции-попробования и элемент находится в переполнении
Как я могу создать этот фон, используя градиент вместо изображения?
Некорректное поведение прокрутки в браузере Mozilla Firefox
Угловой материал. Добавьте прозрачный цвет в строку при наведении курсора
Псевдокласс CSS ":is()" с относительными селекторами
Есть ли способ назначить другую cssVariable cssVariable на основе класса, в который она вложена?
Медиа-запросы — проект колледжа для начинающих по HTML и Css
Похожие вопросы
Как переместить двоюродные элементы HTML только с помощью CSS
Выпадающее подменю Bootstrap 5 не расширяется
Парсинг веб-страниц с помощью раскрывающихся списков с использованием R
Неожиданный результат при отправке запроса, содержащего HTML-код, в OpenAI API
Почему скрытое переполнение CSS скрывает границы?
Текст обтравочного контура вокруг четверти круга (CSS)
Процент вырезов на диаграмме данных
Как я могу создать этот фон, используя градиент вместо изображения?
Псевдокласс CSS ":is()" с относительными селекторами
Медиа-запросы — проект колледжа для начинающих по HTML и Css