Как переместить текст влево при наведении?

Question

Когда курсор мыши завис на кнопке, текст перемещается вниз, мне нужно переместить текст только влево на 5px, при наведении на кнопку, как это реализовать?

div {
  text-align: center;
}

span {
  margin-right: 10px;
}

button {
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;
}

button:hover {
  padding: 13px;
  transition: all 500ms ease;
}

<div>
  <span>test</span><button>&#10230;</button>
</div>

Answer 1

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

Полагаю, есть несколько способов решить эту проблему.

Вы можете добавить vertical-align: top; к промежутку.(Супер простое исправление CSS, которое сохраняет HTML как есть. Недостаток: исправляет текст в верхней части элемента)

div {
  text-align: center;
}

span {
  vertical-align: top;
  margin-right: 10px;
}

button {
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;
}

button:hover {
  padding: 13px;
  transition: all 500ms ease;
}

<div>
  <span>test</span><button>&#10230;</button>
</div>

Чтобы действительно это исправить (не перетекание текста в верхнюю часть элемента), вы хотите добавить элемент-оболочку вне диапазона:

.center {
  text-align: center;
}

span {
  margin-right: 10px;
}
.wrapper {
 display:inline-block;
}
button {
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;
}

button:hover {
  padding: 13px;
  transition: all 500ms ease;
}

<div class="center">
  <p class="wrapper"><span>test</span></p><button>&#10230;</button>
</div>

Вы также можете отобразить родительский элемент как гибкий и выровнять детей соответственно:

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  margin-right: 10px;
}

button {
  background: green;
  border: none;
  padding: 9px;
  color: #FFF;
  border-radius: 50%;
  cursor: pointer;
  transition: all 500ms ease;
}

button:hover {
  padding: 13px;
  transition: all 500ms ease;
}

<div class="flex">
  <div><span>test</span></div><button>&#10230;</button>
</div>