标题 ::after 元素始终位于文本后的右上角

Question

我的标题带有箭头 ::after 元素。在使用 margin-left:10px 绝对定位元素后，但是当我缩小网站时，元素会用文本向下包装。

有没有办法让箭头始终保持在标题的右上角，无论设备的宽度如何？

尝试使用内联显示，但它不起作用。知道是否可行吗？

Answer 1

我将标题放在另一个元素中并使用 parent 的 ::after pseudo-element。在我的示例中，我使用 <div> 和 display: inline;，并将标题的 margin-right 设置为 1em 以说明 ::after 元素的宽度。我的代码可能与您的代码差别不大，只是使用了不同的选择器。

CodePen 在这里：https://codepen.io/the_Northway/pen/GRMyrLR

编辑：根据建议添加 Stack Snippet - codepen 对于更改屏幕大小仍然很有用。

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>

标题 ::after 元素始终位于文本后的右上角

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

html

css

pseudo-element