HTML, CSS как выделить одно слово из текста.

Question

HTML, CSS как выделить одно слово из текста.

Александр Бакин Профи (580), на голосовании 1 год назад

Есть текст, необходимо выделить одно слово фоновым цветом, чтобы этот фон был с закругленными углами и сам фон был повернут на 3 градуса. Но чтобы текст так и оставался ровным и ни в коем случае не был повернут. Буду признателен, если подскажите как это сделать.

Answer 1

viv2537 Оракул (88409) 1 год назад

если просто выделить - style="background-color:#FFFF00", если именно то, что ты хочешь, надо создавать элемент нужного цвета и заякорить на нужный текст.

Александр БакинПрофи (580) 1 год назад

что значит заякорить?

viv2537 Оракул (88409) Александр Бакин, anchor. привязать один элемент к другому. вообще, можно скруглить через border-radius: 10px, но повернуть отдельно от текста вряд ли

Answer 2

 .text-container { 
    font-size: 18px; 
    line-height: 1.6; 
    padding: 20px; 
    position: relative; 
} 
 
.highlight { 
    background-color: #FFD700; /* Цвет фона */ 
    border-radius: 10px; /* Закругление углов */ 
    transform: rotate(3deg); /* Поворот фона на 3 градуса */ 
    display: inline-block; 
    padding: 5px 10px; /* Отступы вокруг выделенного слова */ 
    margin: -5px -10px; /* Компенсация отступов, чтобы фон не "уходил" за границы текста */ 
}

Answer 3

Через псевдо-элемент: https://codesandbox.io/s/vigilant-oskar-q3rvwl

Еще можно сделать через 2 обертки, верхний элемент повернуть на 3 градуса, а внутренний развернуть в противоположную сторону, "вернуть на место", но лучше без лишних оберток.