CSS: Сохранение в одной строке - Содержание элементов и :: после содержимого

Question

Я использую CSS для создания пронумерованных боковых панелей с номером привязки в основном тексте.

Проблема в том, что это число будет переноситься на новую строку независимо от слова, которое оно следует, в зависимости от положения номера и/или изменения размера видового экрана.

Есть ли способ заставить счетчик и предыдущее слово обернуть вместе? Например, с помощью столбцов CSS можно предпочесть или подавить разрывы столбцов.

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

Пример желаемой упаковки: http://i.imgur.com/C304TR3.png

Пример нежелательной упаковки: http://i.imgur.com/3KltUyT.png

Обратите внимание на положение верхнего индекса '1' в обоих изображениях.

Answer 1

Изменение display: inline-block до display: inline оно сохранит надстрочный индекс.

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