Как использовать относительную и абсолютную позицию для объекта позиции ::after в кнопке, чтобы сделать ее отзывчивой? ⇐ Html

[Гость]

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

Я просмотрел много видеороликов об относительном и абсолютном положении, но изо всех сил пытаюсь применить его в своем коде. Пример правильной кнопки

Мой код следующий:

.cn-btn-bn1 { дисплей: блок; положение: относительное; граница: 0,91 пикселя, сплошная #020B24; радиус границы: 23 пикселя! важно; цвет фона: #020B24; цвет: #FFF; высота строки: нормальная; выравнивание текста: по левому краю; курсор: указатель; пробел: nowrap; переход: фон .3с; } .cn-btn-bn1:hover { цвет: #020B24; цвет фона: #FFF; } .cn-btn-bn1--label { текстовое оформление: нет; преобразование текста: использовать заглавную букву; межбуквенный интервал: .05em; семейство шрифтов: 'InfinitiBrand-Regular'; } .cn-srp-only .cn-btn-bn1 { отступ: 7 пикселей 0; размер шрифта: 16 пикселей; текстовый отступ: 18 пикселей; } .cn-btn-bn1::after { содержание: ""; дисплей: гибкий; позиция: абсолютная; правая граница: 1,5 пикселя, сплошная #FFF; нижняя граница: 1,5 пикселя, сплошная #FFF; преобразование: поворот (-45 градусов); курсор: указатель; } .cn-btn-bn1:hover::after { правая граница: 1,5 пикселя, сплошная #020B24; нижняя граница: 1,5 пикселя, сплошная #020B24; } .cn-srp-only .cn-btn-bn1::after { ширина: 11,5 пикселей; высота: 11,5 пикселей; маржа: -1em 0 0 21,7em; } @media (максимальная ширина: 767 пикселей) { .cn-srp-only .cn-btn-bn1 { отступ: 6 пикселей 0; размер шрифта: 16 пикселей; текстовый отступ: 18 пикселей; } .cn-srp-only .cn-btn-bn1::after { ширина: 11 пикселей; высота: 11 пикселей; маржа: -.92em 0 0 19,9em; } персонализируйте платеж

У меня есть относительная позиция в .cn-btn-bn1, но я не уверен, куда мне ее поместить: туда или в cn-buynow-b1. Я сделал и то, и другое, но разницы в положении стрелок не заметил. Я попытался снять шлейф дисплея, из-за чего ширина кнопки увеличилась. Я поменял абсолютное положение на относительное в ::after, что испортило высоту кнопки.

Единственный @media, который я настроил для мобильных устройств, но я знаю, что он не идеален.