Want to apply the css in specific point without using any tag-CodePudding

My Name is Amit Kumar

I want to apply css only Amit without using any tag like span or strong no any tag whole thing wrap in p tag and also if possible not use javascript only css applicable i tried but i cant find if anyone know to do this please help to find out

please help me to find the solution

CodePudding user response：

It is not possible. You should wrap the text with different style in a tag be it span, strong, etc. If you are wanting to do this because of some other reason, like for extracting text only using JavaScript, etc., there are ways to do that too correctly.
Definition of markup in itself goes against what you're trying to achieve:

Markup language refers to a text-encoding system consisting of a set of symbols inserted in a text document to control its structure, formatting, or the relationship between its parts.

So if you want a part of text to be shown distinct from others it should be in an identifiable tag.

CodePudding user response：

Only possible with some hack.
There is no selector available in css3 for select word.
Read more at A Call for ::nth-everything

    p::after {
        content: "Amit ";
        color: red;
        margin-left: -6em;
    }

<p>My Name is &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Kumar</p>

CodePudding user response：

You mentioned that not using javascript would be ideal, but it appears that is the only option you would have since you need to select the text node and wrap it in spans or other elements in order to selectively apply styling to it. I've had to do this in order to dynamically highlight certain parts of text.

Here's an example from a resource I used to do this:

  var inputText = document.getElementById("inputText");
  var innerHTML = inputText.innerHTML;
  var index = innerHTML.indexOf(text);
  if (index >= 0) { 
   innerHTML = innerHTML.substring(0,index)   "<span style='color:yellow'>"   innerHTML.substring(index,index text.length)   "</span>"   innerHTML.substring(index   text.length);
   inputText.innerHTML = innerHTML;
  }