#html #css
Вопрос:
Итак, у меня есть это, я просто хочу установить размер шрифта R с другим цветом. я пробовал псевдоэлементы и классы, но не смог найти никакого решения.
.normal-text p{font-size:18px;color:red; text-align:center}
<div class="normal-text">
<p>Lorem</p>
</div>
Комментарии:
1. «размер шрифта буквы R» … какой R?
2. Вопрос отредактирован, пожалуйста, проверьте еще раз.
3.Сделать одну букву в тексте другого цвета с помощью псевдоэлементов CSS практически невозможно. Вы можете попытаться расположить
::after
элемент точно так , чтобы он закрывалr
, но выравнивание будет отключено, как только изменится разрешение экрана, шрифт и уровень масштабирования. Нет никакого способа, которым вы всегда будете получать красноеr
точно поверх черного.4. На данный момент
::first-letter
для этой цели хорошо поддерживается только псевдоэлемент в CSS. Что касается вашего вопроса, к сожалению, он касается только первой буквы элемента.5. Да, я пробовал ::псевдоэлементы с первой буквой.
Ответ №1:
В css нет селектора для буквы среднего диапазона. Возможно, вы могли бы попробовать решение javascript для этого.
Шаги:
- разделите строку
- выберите индекс
- добавьте
<span>
и присоединитесь к массиву - обновите преобразованное значение до исходного элемента
<!DOCTYPE html>
<html>
<head>
<style>
p span {
font-size: 30px;
text-transform: uppercase;
color: green;
}
</style>
</head>
<body>
<p id="og">Lorem</p>
<script>
let str = document.getElementById("og").innerHTML;
const myArr = str.split("");
myArr[2] = '<span>' myArr[2] '</span>';
let myString = myArr.join();
myString = myString.replaceAll(',', '');
document.getElementById("og").innerHTML = myString;
</script>
</body>
</html>
Ответ №2:
Вы можете использовать ::after
, чтобы расположить другой цвет r
поверх фактического… подобный этому:
.normal-text {
text-align:center;
}
.normal-text p {
font-size:18px;
color:red;
position:relative;
display:inline-block;
}
.normal-text p:after {
content:'r';
color:blue;
position:absolute;
bottom:0;
left:20px;
display:block;
width:6px;
height:21px;
background-color: white;
}
<div class="normal-text">
<p>Lorem</p>
</div>
Обратите внимание, что я добавил белый цвет фона и сделал его block
элементом, чтобы избежать несоответствий при увеличении и уменьшении масштаба вашего браузера.
Но все еще далек от совершенства. Сообщество просило a ::nth-letter()
в качестве CSS
собственности с 2012 года, но безуспешно.
Комментарии:
1. Ценю ваш ответ, но также мне нужно изменить размер шрифта на больший R.
2. Тогда поищите опцию javascript. Невозможно только с помощью CSS
Ответ №3:
Вы можете вложить письмо r
в тег span и придать ему другой цвет:
<p>Lo<span class="different-color">r</span>em</p>
Если у вас есть доступ только к css (как указано в комментариях), попробуйте добавить градиентный цвет к тексту и расположить его таким образом, чтобы только » R » получал другой цвет
Комментарии:
1. Да, я уже знаю это, но я не могу изменить это в своем живом коде.
2. у вас есть доступ только к css?
3. Да, у меня есть доступ только к css.
4. Может быть, попробуйте добавить градиентный цвет к тексту и расположить его таким образом, чтобы только » R » получал другой цвет
5. Да, но не получаю точного результата.