CSS: hanging::before 具有不同格式的标签

Question

我想要标记单词组的标签，其中:

• 标签在词组的左边
• 文字是用线括起来的，标签不是
• 文字缩进，标签不缩进

这里有一些东西会产生错误的格式。左侧边界应用于::before 生成的文本，缩进也应用于::before 生成的文本。我该如何解决？

div[role=s]::before {
  content: "s ";
}

div {
  border-left: 1px inset lightgrey;
  border-top: 1px inset lightgrey;
  border-bottom: 1px inset lightgrey;  
  
  padding-left: 1em;
}

<div role="s">
Peter and John
</div>

Answer 1

使用您现有的标记，您可以绝对将标签放置在 div 之外。

div[role=s]::before {
  content: "s ";
  position: absolute;
  right: 100%; top: 0;
  width: 1em;
}

div[role=s] {
  border-left: 1px inset lightgrey;
  border-top: 1px inset lightgrey;
  border-bottom: 1px inset lightgrey;  
  padding-left: 1em;
  position: relative;
  margin-left: 1em;
}

<div role="s">
Peter and John
</div>

或者如果您可以引入一个新元素，您可以在嵌套元素周围放置边框，并在父元素上使用 flex 使它们排成一行。

div[role=s]::before {
  content: "s ";
}

div[role=s] {
  display: flex;
}

div[role=s] > div {
  border-left: 1px inset lightgrey;
  border-top: 1px inset lightgrey;
  border-bottom: 1px inset lightgrey;  
  padding-left: 1em;
  margin-left: .5em;
  flex: 1 0 0;
}

<div role="s">
  <div>Peter and John</div>
</div>