Блог

Главная - Вопросы по программированию - Можно ли в любом случае добавить CSS к определенному тексту в теге, используя только CSS?

Можно ли в любом случае добавить CSS к определенному тексту в теге, используя только CSS?

#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 для этого.

Шаги:

  1. разделите строку
  2. выберите индекс
  3. добавьте <span> и присоединитесь к массиву
  4. обновите преобразованное значение до исходного элемента
 <!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. Да, но не получаю точного результата.

Метки: ,