Heading ::after element always in top right right after text-CodePudding

I have my heading with arrow ::after element. After element is positioned absolute with margin-left:10px, but when i shrink down website the element wraps with text down.

Is there a way for arrow to always stick to top right of heading no matter what width of device like this?

Tried with display inline but it doesnt work. Any idea if it's possible?

CodePudding user response：

I'd wrap the heading in another element and use the ::after pseudo-element of the parent. In my example, I used a <div> with display: inline;, and set the heading's margin-right to 1em to account for the width of the ::after element. My code probably isn't too different from yours, just uses different selectors.

CodePen here: https://codepen.io/the_Northway/pen/GRMyrLR

Edit: adding the Stack Snippet by suggestion - codepen is still useful to change screen size though.

div {
  position: relative;
  display: inline;
  text-align: center;
}
div h3 {
  margin-top: 0;
  margin-right: 1em;
}
div::after {
  position: absolute;
  display: block;
  width: 1em;
  height: 1em;
  content: ">";
  color: red;
  top: 0;
  right: 0;
}

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}

<div><h3>Looking for help?</h3></div>