Search code examples
htmlcss

Button label which has ← at the left

I want to make the button label such as

<button style="width:80px">←  back  <button>

then I want to put the ← at the left and set back in the middile of button.

such as

 ____________
|←   back    |

I think I should use Flex ,but a little bit confused, because

← should be at the left

back should be in the middle of button itselt not a remaining space

How can I make this?

Solution

  • I think you could use another approach with position absolute and align the text at center

    With this you will achieve two things

    • Keeping the arrow always at left
    • Align the text to the center not considering the arrow at left (as the arrow will have position absolute is not going to align the text at the center)
    <button>
  <span class="arrow">←</span>
  <span class="text">back</span>
</button>

    button {
  position: relative;
  width: 100px;
  text-align: center;
}

button .arrow {
  position: absolute;
  left: 5px;
}