Is there anyway to add CSS on particular text in a tag using only CSS?-CodePudding

So i have this, i just want to set font-size of the R with Different Color. i have tried Pseudo elements and classes, i couldn't find any solution.

.normal-text p{font-size:18px;color:red; text-align:center}

<div class="normal-text">
<p>Lorem</p>
</div>

CodePudding user response：

There is no selector in css for mid range letter. Perhaps you could try javascript solution for this.

Steps:

split the string
select the index
add <span> and join the array
update the transformed value to the original element

<!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>

CodePudding user response：

You could use ::after to position another color r over the actual one... like this:

.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>

Notice I did add a white background color and make it a block element to avoid inconsistences when zooming in and out your browser.

But still far from perfect. Community has been asking for a ::nth-letter() as a CSS property since 2012 with no success.

CodePudding user response：

You can enclose the letter r inside a span tag and give that a different color:

<p>Lo<span class="different-color">r</span>em</p>