Товарищи веб дизайнеры часто покидывают интересные задачки, они нарисовали, а ты потом думай, как это сделать. Задача такая, сделать подчеркивание текста картинкой, так, чтобы подчеркивание при уменьшении текста и при переносе текста оставалось всегда под одной и тоже фразой или словом.
На самом деле это сделать совсем не сложно, ну, когда знаешь конечно)
Итак, у нас есть параграф, в котором нужно сделать подчеркивание даты и времени.
Для начала нужно выделить слово или словосочетание, просто как обычно текст мышкой выделите и все. И с верху появится панелька с параметрами. Нам нужно кликнуть по кисточки.
После этого у текста появится новое вложение, которое мы и будем настраивать.
Вы можете задать класс этому вложению, а можете не задавать он пропишешься автоматически.
Теперь нам нужно помесить картинку с подчеркиванием во вложение в тексте которое мы сделали. И помещается она туда бэкграундом. Картинка заранее должна быть загружена в файлы Webflow.
Кликаем по нужному тексту, и заходим в настройки бэкграунда.
Загружаем картинку и выставляем параметры как на скрине. Выставляем: custom, прижимаем картинку в низ, и нажимаем крестик чтобы отключить клонирование картинки.
Теперь наш текст выглядит так, но картинка слишком сильно прижата к тексту.
Чтобы сделать нужный отступ, перейдите в панель Layout и кликните по параметру inline-block.
Теперь у нас появилась возможность регулировать нижний внутренний отступ. Смотрите сколько пикселей в проекте столько выставляйте и здесь.
И картинка смещается вниз.
Теперь подчеркивание всегда будет переноситься вместе с текстом, и уменьшатся при уменьшении размера текста.
Вот так просто это делается в сервисе Webflow)