html - 显示 :after content inline with <div>

Question

我需要显示 :after 与 <div> 内联的内容.对于我使用的 slider (Royal Slider)，我有导航输出数字。我需要在该输出之后显示“PHOTOS”一词，但要与它内联。

目前我的代码输出:

1 2 3 4 5 6 7
PHOTOS

我需要:

1 2 3 4 5 6 7 PHOTOS

HTML

<div class="numNav">1 2 3 4 5 6 7</div>

CSS

.numNav {
    display: inline-block;
}
.numNav:after {
    content: "PHOTOS";
    display: inline-block;
}

Answer 1

您可以添加 white-space: nowrap; 如下:

.numNav {
  display: inline-block;
  white-space: nowrap;
}
.numNav:after {
  content: "PHOTOS";
  display: inline-block;
}

<div class="numNav">1 2 3 4 5 6 7 </div>

假设您指的是较小的分辨率/窗口。在其他情况下，原因会按预期工作。

没有空格的例子:nowrap和小宽度:

.numNav {
    display: inline-block;
    width: 100px;
    /*white-space: nowrap;*/
}

.numNav:after {
    content: "PHOTOS";
    display: inline-block;
}

<div class="numNav">1 2 3 4 5 6 7 </div>

同样的例子，这次使用 whitespace: nowrap:

.numNav {
  display: inline-block;
  width: 100px;
  white-space: nowrap;
}
.numNav:after {
  content: "PHOTOS";
  display: inline-block;
}

<div class="numNav">1 2 3 4 5 6 7 </div>