Question

我遇到了这个问题。我想在与h1相同的行上添加其他颜色的单词。我正在使用h1：after来添加单词并将其设置为红色。

问题是当我调整窗口大小时，单词的包装方式与添加没有样式的单词的方式不同。

这是笔：https://codepen.io/sidiousvic/pen/VBeRdM

h1 {
  display: flex;
  font-size: 70px;
  font-family: Iceberg;
  text-transform: uppercase;
  font-weight: normal;
  margin: auto;
  margin-bottom: 0px;
  margin-left: 30px;
  margin-right: 0px;
}

h1:after {
  content: "(RED)";
  color: red;
}

<h1>Vinyl Player (Red)</h1>

如您所见，我保留了以下两个选项：h1标记内的（RED）字和h1：after中添加的内容相同。如果您调整窗口的大小，您会看到白色的文字很好地包裹在一起，红色的添加文字有些许错开。

可以做到吗？我已经尝试了很多方法，包括在h1内以及在h1内，同样的问题。

感谢您的帮助！

Answer 1

删除display: flex;属性。不确定是否需要。

Answer 2

display: flex强制并排显示子级（尊重其min-width属性），而您的h1及其:after则没有。删除它会回到默认的display: inline。

如果您是Flexbox的新手，我建议this guide。

摘要

h1 {
  font-size: 70px;
  font-family: Iceberg;
  text-transform: uppercase;
  font-weight: normal;
  margin: auto;
  margin-bottom: 0px;
  margin-left: 30px;
  margin-right: 0px;
}

h1:after {
  content: "(RED)";
  color: red;
}

<h1>Vinyl Player (Red)</h1>

使用h1：after，添加的文字不会与其他文字一起包装吗？

2 个答案:

摘要