CODEWITHSUNDEEP
css
Dr. Edward Morbius
Dr. Edward Morbius

Reputation: 267

CSS: Keeping it on one line -- Content with elements and ::after content

I'm using CSS to create numbered sidenotes, with an anchoring number in the main text body.

Problem is that that number will wrap to a new line independently of the word it follows depending on position of the number and/or viewport resizing.

Is there a way to force the counter and preceding word to wrap together? E.g., with CSS columns it's possible to prefer or suppress column breaks.

Codepen: http://codepen.io/dredmorbius/pen/OVmBaZ

article {
  padding: 1em 4em;
  max-width: 30em;
  margin: 0 auto;
  counter-reset: noteNum;
}

article sidenote notetext {
    background: #fffee8;
    border: solid 1px #333;
    border-width: 1px 0;
    float: right;
    display: inline-block;
    margin: 0.25rem -5rem 0.75rem 1rem;
    padding: 0.25rem 0.5rem;
    width: 8rem;
}

article sidenote notetext::before {
    counter-increment: noteNum;
    content: "Note " counter(noteNum) ": ";
    padding-right: 0.2em;
    font-style: italic;
}

article sidenote::after {
    vertical-align: super;
    font-size: 0.6em;
    display: inline-block;
    margin-left: -0.2em;
    width: 1rem;
    content: counter(noteNum) "";
}

Example of desired wrapping: https://i.sstatic.net/362Ym.png

Example of undesired wrapping: https://i.sstatic.net/NoTPc.png

Note the position of the superscript '1' in both images.

Upvotes: 2

Views: 60

Answers (1)

m4n0
m4n0

Reputation: 32255

Change display: inline-block to display: inline it will keep the superscript intact.

article sidenote::after {
  vertical-align: super;
  font-size: 0.6em;
  display: inline-block;
  margin-left: -0.2em;
  width: 1rem;
  content: counter(noteNum) "";
}

Upvotes: 3

Related Questions