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?

http://stackoverflow.com/help/how-to-ask – Emmanuel N K Dec 19 '16 at 06:52 — Emmanuel N K, Dec 19 '16 at 06:52
R u Using Jquery in ur project? – kamesh Dec 19 '16 at 07:06 — kamesh, Dec 19 '16 at 07:06

score 4 · Answer 1 · answered Dec 19 '16 at 07:02

4

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.

answered Dec 19 '16 at 07:02

GeekAb

505
4
15

1

Lol you didn't realise about the 'u' tag, until looking at my answer. Happy to help! :) – Shobhit Srivastava Dec 19 '16 at 07:05
Upvoted for mentioning it is not currently possible with CSS alone. – PassKit Dec 19 '16 at 07:07
@ShobhitSrivastava Thanks :) – GeekAb Dec 19 '16 at 07:09

score -3 · Answer 2 · edited May 23 '17 at 11:45

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/

score -3 · Answer 3 · answered Dec 19 '16 at 06:54

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>

Shobhit Srivastava · Answer 4 · 2016-12-19T08:00:31.240

-3

You can just do this:

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

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

edited Dec 19 '16 at 08:00

answered Dec 19 '16 at 07:02

Shobhit Srivastava

549
3
13

score -3 · Answer 5 · answered Dec 19 '16 at 07:06

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
}

select first three characters off a stringin css

5 Answers5