Clever Geek Handbook

Display: after content inline with <div>

I need to display: after the inline content with <div>

. For the slider I'm using (Royal Slider) I have a numerical navigation display. I need the word "PHOTO" to display after this output, but inline with it.

My code currently 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;
}
+3


source to share


1 answer


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>
Run codeHide result


Let's say you are referencing smaller resolutions / windows. The reason in other cases works as expected.

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>
Run codeHide result


The same example 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>
Run codeHide result


+5


source






More articles:


All Articles