select first three characters off a stringin css

Question

I have a heading named "Happy Starting". Now I want to underline only first three characters. For example, "Hap" only instead of entire "Happy".

How can I select first three characters of "Happy" in css?

Answer 1

Copying the answer from: change color css only first 6 character of text

---

How about using :before?

I would change the text from "Client Testimonial" to "Testimonial", and then with CSS apply the :before rule:

HTML:

<div class="word">Testimonial</div>​​​​​​​​

CSS:

.word {
 color: black;       
}
.word:before {
 color: red;
 content: "Client ";
}

Example: http://jsfiddle.net/LvZt7/

Answer 2

Use the span tag

The HTML span tag is used for grouping and applying styles to inline elements.

There is a difference between the span tag and the div tag. The span tag is used with inline elements whilst the div tag is used with block-level content.

span{
  text-decoration:underline;
  }

<p><span>Hap</span>py Starring</p>

Answer 3

CSS don't have anything which can help you to style particular or any n characters.

One way to achieve this is put those 3 characters within span and style it using css.

Something like

.word{
    color: green;
}
.word span{
   color: red;
   text-decoration:underline;
}

<div class="word"><span>Hap</span>py Starting</div>

Check this fiddle https://jsfiddle.net/LfsLpz5g/

Or you can use <u> html tag also.

Answer 4

You can just do this:

<h1><u>Hap</u>py Starting!</h1>

The 'u' tag underlines, only the text inside it.

Answer 5

A quick method to Solve the problem

<span style="text-decoration: underline;" >Hap</span>py Starting

Or

Specify an id to the span tag, and you can customize it in the css part

<span id="someid" >Hap</span>py Starting

In css

#someid
{
   text-decoration: underline;
  //do whatever you want
}