In this snippet, the number 5 appears in the margin to the left of the word “incididunt”, and a blue mark appears inside the word, as desired.
But if the window is just the right width, the word breaks across two lines at the blue mark.
Using just CSS (and not wrapping the word inside a new span), can I keep “incididunt” together and keep the line from breaking?
I tried adding white-space:nowrap to .note and to .note::after. Neither helped. I see a few related questions on SO but all more complicated than this and without solutions.
body {margin-left:30px; position:relative}
.note {
border-left:2px solid blue;
}
.note::after {
content:"5";
position:absolute;
left:-25px;
}<body>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor inci<span class="note"></span>didunt</body>