HTML, CSS как выделить одно слово из текста.
Есть текст, необходимо выделить одно слово фоновым цветом, чтобы этот фон был с закругленными углами и сам фон был повернут на 3 градуса. Но чтобы текст так и оставался ровным и ни в коем случае не был повернут. Буду признателен, если подскажите как это сделать.
По дате
По рейтингу
Через псевдо-элемент: https://codesandbox.io/s/vigilant-oskar-q3rvwl
Еще можно сделать через 2 обертки, верхний элемент повернуть на 3 градуса, а внутренний развернуть в противоположную сторону, "вернуть на место", но лучше без лишних оберток.
12345678910111213141516
.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; /* Компенсация отступов, чтобы фон не "уходил" за границы текста */
}
если просто выделить - style="background-color:#FFFF00", если именно то, что ты хочешь, надо создавать элемент нужного цвета и заякорить на нужный текст.
