Как сделать css before неразрывным с элементом?

Question

[Дмитрий]

Иногда элемент переносится на новую строку а его before остаётся на предыдущей.
Как сделать так чтобы он всегда переносился?
https://codepen.io/demon416/pen/VwdYBqG

Comments

[cssfish]

пример будет?

[Дмитрий]

Позже, завал мозгоебли

[Дмитрий]

cssfish пример добавлен

[cssfish]

Дмитрий, хм не вижу такого. переносится по пробелу между текстом и < a >
а неразрывные пробелы перед < a >переносятся вместе с ней

[Дмитрий]

Случайно сохранил в примере решение из ответа, изначально там другой код был

h2 a
{
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 140%;
text-transform: uppercase;
color:blue;
}
h2 a:before{
content:"";
display:inline-block;
width:20px;
height:4px;
background-color: blue;
margin:5px;
}

Answer 1

[Вадим]

.elem::before {
  content: 'Текст\00a0' /* , где \00a0 - юникод символ неразрывного пробела */
}

Если это не то, что Вам нужно - уточняйте вопрос, потому что без контекста других вариантов нет.

Comments

[Дмитрий]

не работает
добавил https://codepen.io/demon416/pen/VwdYBqG для понятности
если уменьшать ширину окна текст ссылки переносится отдельно от ее before

[Вадим]

Дмитрий, ну так, inline block же...

[Вадим]

Дмитрий, вот как вариант, как можно заменить:

h2 a:before {
    content: "\00a0\00a0\00a0\00a0";
    background-image: linear-gradient(to bottom, blue 5px,  transparent 5px);
    margin-right: 5px;
}

[Дмитрий]

спасибо