2

I created some links with css arrows which work as I expect except when the text of the link wraps. The arrow displays right after the link text, except when the link text wraps and then there is white space between the text and the arrow which I don't want. The default justify-content is flex start, so I assume this is not a flex box issue but something I misunderstand about the size of an element with wrapped text.

This html demonstrates the problem if you shrink your browser right down: the arrow is right next to the text until it wraps and then it is off to the right of the text until the window shrinks enough to bring it next to the text again. Ideally I want the arrow to remain attached to the right end of the text.

body {
  font-size: 160%;
}

a {
  background: lightgreen;
  display: flex;
  align-items: flex-start;
}

a:after {
  content: '';
  vertical-align: middle;
  border: 0.6em solid transparent;
  border-left-color: inherit;
}
<a href="#">A link to somewhere</a>
j08691
  • 204,283
  • 31
  • 260
  • 272
Jonu
  • 21
  • 1
  • 1
    https://stackoverflow.com/a/37413580/3597276 – Michael Benjamin Dec 26 '17 at 20:03
  • you should create a codepen so that people can actually experience what youre talking about instead of just reading what youve wrote about it. also where is the arrow in ur code?! – oldboy Dec 26 '17 at 21:37

0 Answers0