Как легко и быстро верстать красивые списки с буллитами в Тильде

Всем салют😘✌️ Не забываем ставить 👍 и подписываемся на канал 🛎 — впереди много интересного🔥🥳 Меня зовут Чистякова Наталья, я UX/UI дизайнер, подготовила для вас небольшое видео о том, как на Тильде, не прибегая к растасовке по артборду буллитов руками, красиво и быстро верстать списки, перечисления, тарифы и т. п. 😻— благодаря паре строчек CSS и псевдоклассам👌 Много пользы, профессионального и человеческого общения на любые темы ждёт вас в нашем чате Pro.дизайн 👉
Если у вас есть вопросы о дизайну, типографике, креативным идеям, документам для сайта, общению с заказчиками (включая спорные ситуации) — пишите мне — разберёмся в любой задаче: Мой ТГ —
ВК — https://vk.com/chistyakovan
Инст (продукт Meta, в РФ признана экстремистской организацией) —   / chistyakova.website   DProfile —
В видео использован следующий CSS (не забудьте проставить теги style в угловых скобках в начале и конце кода): — Буллиты → меняете класс элемента и ссылку на свой буллит (
, а также корректируете, по необходимости, код в части width, height, top и left, чтобы поправить положение буллита относительно сетки или относительного самого элемента: .класс_элемента::before { content: url(
сылка_на_вашу_иконку/111.svg); position: absolute; width: 15px; height: 15px; top: 1px; left: -29px; } — Зачёркивание → меняете класс элемента и цвет самой линии зачеркивания (больше информации о CSS-декорировании текста — напр.,
.класс_элемента { text-decoration: line-through; text-decoration-color: #ffe700; } Не упомянула в видео: всё это работает и в адаптиве — просто проверяйте опубликованную страницу в симуляторе, как обычно, и если необходимо, корректируйте положение либо самих элементов (если буллит вправо-влево относительно сетки, двиньте соответственно элемент или сам буллит, но его — уже в коде через значения left, в данном случае). До связи👋, мои контакты указаны выше☝️, вливайся в чат Pro.дизайн 👉
🥳 За разработкой сайта или поменторить проект пишите в ЛС🙌😘

Смотрите также