Как изменить размер фона текста?

Question

При наведении на текст у него должен меняться цвет и появляться что-то типа рамки. Пробовал через padding, но не хочу чтобы остальные слова тоже отодвигались. Должно быть как на скриншоте

Answer 1

Попробуйте так:

<style>
      body {
        font-family: Roboto, Arial, sans-serif;
      }
      .menu {
        display: flex;
        flex-direction: row;
      }
      .menu__item {
        padding: 0.2rem 0.9rem;
        margin-right: 0.5rem;
        font-size: 1em;
        text-transform: uppercase;
        color: gray;
        border: 1px solid transparent;
        border-radius: 3px;
        transition: 0.4 all ease-in-out;
        cursor: pointer;
      }
      .menu .menu__item:last-child {
        margin-right: 0;
      }
      .menu__item:hover {
        color: white;
        background-color: #ffbb42;
        border: 1px solid #ffb229;
      }
</style>

    <div class="menu">
      <div class="menu__item">Home</div>
      <div class="menu__item">Service</div>
      <div class="menu__item">About us</div>
    </div>

Answer 2

li {
  list-style: none;
  display: inline-block;
  padding: 5px 10px;
  text-transform: uppercase;
  background-color: transparent;
  color: gray;
  transition: all 0.5s;
}

li:hover {
  background-color: #ffbb42;
  color: #ffffff;
}

<ul>
  <li>Home</li>
  <li>Service</li>
  <li>About Us</li>
</ul>

БЛОГ НА HUSL

Как изменить размер фона текста?

Ответы (2 шт):