Как вы создаете эффект выделения, который переполняет текстовый контент? ⇐ CSS

[Anonymous]

Я пытаюсь создать эффект выделения, который оставляет немного места спереди и в конце для разборчивости, чтобы имитировать, как вы выделите книгу. Вот несколько попыток: < /p>


p {
width: 10em;
}

mark.with-padding {
border-radius: 10px;
padding: 0.4em 0.2em;
background-color: hsl(200deg 100% 80%);
box-decoration-break: clone;
}

mark.with-before-after {
border-radius: 10px;
padding: 0.4em 0px;
background-color: hsl(200deg 100% 80%);
box-decoration-break: clone;
}

mark.with-before-after::before {
content: '\2009';
}

mark.with-before-after::after {
content: '\2009';
}< /code>
Some text here.&ThinSpace;This text is highlighted

Some text here.&ThinSpace;This text is also highlighted
< /code>
< /div>
< /div>
< /p>

[*] Использование прокладки вместе с разрывом в ящике: клон; < /code> применяет прокладку на мягких разрывах линии, что мне нравится. Тем не менее, вертикальное выравнивание текста по понятным причинам не совсем правильно, потому что заполнение занимает некоторое пространство для строк, которые подчеркивают в начале. Тем не менее, это означает, что между выделением и текстом на новой строке нет разрыва. Итак, это смесь 1 + 2, у вас есть как накладка (в зависимости от того, где вы начинаете выделять), так и вертикальное выравнивание. Значение "src =" https://i.sstatic.net/da05p.png "/>
Это имеет три свойства:

wrapping lone Левый край текста для выделенной линии ('t') соответствует левому краю линии Hulightlighted ('p').
Существует «прокладка» на основных моментах до и после текста на каждой строке.>

Подробнее здесь: https://stackoverflow.com/questions/732 ... xt-content