Блог

Главная - Вопросы по программированию - Граница CSS с попутным ветром внизу перемещает последний элемент

Граница CSS с попутным ветром внизу перемещает последний элемент

#tailwind-css

Вопрос:

Попытка добавить пользовательский эффект подчеркивания при наведении с помощью попутного ветра.

 <div className='absolute left-24 space-x-4 hidden lg:flex font-light'>
               <p className='hover:border-b-2 border-blue-500 -mb-1'>Find jobs</p>
               <p className='hover:border-b-2 border-blue-500 -mb-1 '>Company Reviews</p>
               <p className='hover:border-b-2 border-blue-500 '> Find salaries</p>
               </div>

Это работает для первых двух, когда добавляется-mb-1, но когда «Найти зарплаты» зависает над текстом, он увеличивается на несколько пикселей. Попробовал добавить МБ или -МБ, но все равно не повезло.

Есть ли лучший способ сделать это?

Ответ №1:

Вместо изменения ширины границы вы можете изменить цвет границы, тогда движущихся частей не будет.

 <div class='space-x-4 font-light'>
  <p class='border-b-2 hover:border-blue-500 border-transparent'>Find jobs</p>
  <p class='border-b-2 !m-0 hover:border-blue-500 border-transparent '>Company Reviews</p>
  <p class='border-b-2 !m-0 hover:border-blue-500 border-transparent'> Find salaries</p>
</div>
Метки: