Display :after content inline with <div>

Question

I need to display :after content inline with a <div>. For a slider I'm using (Royal Slider) I have the navigation outputting numerically. I need the word "PHOTOS" to display after that output, but inline with it.

Currently my code outputs:

1 2 3 4 5 6 7
PHOTOS

I need:

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

You can add white-space: nowrap; like:

.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>

Assume you are refering to smaller resolutions/windows. Cause in other cases works as it suppose.

Example without whitespace: nowrap and small width:

.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>

Same example this time using 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>