CODEWITHSUNDEEP
htmlcss
ssssamuel13
ssssamuel13

Reputation: 43

Display :after content inline with <div>

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;
}

Upvotes: 3

Views: 122

Answers (1)

Alex Char
Alex Char

Reputation: 33218

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>

Upvotes: 5

Related Questions