Revisions to Is it possible to apply CSS to half of a character?

added 6 characters in body

Source Link

edited Jan 19, 2017 at 15:23

10.2k
12
55
101

Limited CSS and jQuery Solution

I am not sure how elegant this solution is, but it cuts everything exactly in half: http://jsfiddle.net/9wxfY/11/

Otherwise, I have created a nice solution for you... All you need to do is have this for your HTML:

Take a look at this most recent, and accurate, edit as of 6/13/2016 : http://jsfiddle.net/9wxfY/43/Take a look at this most recent, and accurate, edit as of 6/13/2016 : http://jsfiddle.net/9wxfY/43/

As for the CSS, it is very limited... You only need to apply it to :nth-child(even)

$(function(){
  var $hc = $('.half-color');
  var str = $hc.text();
  $hc.html("");

  var i = 0;
  var chars;
  var dupText;

  while(i < str.length){
    chars = str[i];
    if(chars == " ") chars = "&nbsp;";
    dupText = "<span>" + chars + "</span>";

    var firstHalf = $(dupText);
    var secondHalf = $(dupText);

    $hc.append(firstHalf)
    $hc.append(secondHalf)

    var width = firstHalf.width()/2;

    firstHalf.width(width);
    secondHalf.css('text-indent', -width);

    i++;
  }
});

.half-color span{
  font-size: 2em;
  display: inline-block;
  overflow: hidden;
}
.half-color span:nth-child(even){
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="half-color">This is a sentence</div>

Limited CSS and jQuery Solution

I am not sure how elegant this solution is, but it cuts everything exactly in half: http://jsfiddle.net/9wxfY/11/

Otherwise, I have created a nice solution for you... All you need to do is have this for your HTML:

Take a look at this most recent, and accurate, edit as of 6/13/2016 : http://jsfiddle.net/9wxfY/43/

As for the CSS, it is very limited... You only need to apply it to :nth-child(even)

$(function(){
  var $hc = $('.half-color');
  var str = $hc.text();
  $hc.html("");

  var i = 0;
  var chars;
  var dupText;

  while(i < str.length){
    chars = str[i];
    if(chars == " ") chars = "&nbsp;";
    dupText = "<span>" + chars + "</span>";

    var firstHalf = $(dupText);
    var secondHalf = $(dupText);

    $hc.append(firstHalf)
    $hc.append(secondHalf)

    var width = firstHalf.width()/2;

    firstHalf.width(width);
    secondHalf.css('text-indent', -width);

    i++;
  }
});

.half-color span{
  font-size: 2em;
  display: inline-block;
  overflow: hidden;
}
.half-color span:nth-child(even){
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="half-color">This is a sentence</div>

Limited CSS and jQuery Solution

I am not sure how elegant this solution is, but it cuts everything exactly in half: http://jsfiddle.net/9wxfY/11/

Otherwise, I have created a nice solution for you... All you need to do is have this for your HTML:

Take a look at this most recent, and accurate, edit as of 6/13/2016 : http://jsfiddle.net/9wxfY/43/

As for the CSS, it is very limited... You only need to apply it to :nth-child(even)

$(function(){
  var $hc = $('.half-color');
  var str = $hc.text();
  $hc.html("");

  var i = 0;
  var chars;
  var dupText;

  while(i < str.length){
    chars = str[i];
    if(chars == " ") chars = "&nbsp;";
    dupText = "<span>" + chars + "</span>";

    var firstHalf = $(dupText);
    var secondHalf = $(dupText);

    $hc.append(firstHalf)
    $hc.append(secondHalf)

    var width = firstHalf.width()/2;

    firstHalf.width(width);
    secondHalf.css('text-indent', -width);

    i++;
  }
});

.half-color span{
  font-size: 2em;
  display: inline-block;
  overflow: hidden;
}
.half-color span:nth-child(even){
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="half-color">This is a sentence</div>

added 44 characters in body

Source Link

edited Oct 5, 2016 at 4:12

Adjit

10.2k
12
55
101

Limited CSS and jQuery Solution

I am not sure how elegant this solution is, but it cuts everything exactly in half: http://jsfiddle.net/9wxfY/11/

Otherwise, I have created a nice solution for you... All you need to do is have this for your HTML:

Take a look at this most recent, and accurate, edit as of 6/13/2016 : http://jsfiddle.net/9wxfY/41/http://jsfiddle.net/9wxfY/43/

As for the CSS, it is very limited... You only need to apply it to :nth-child(even)

$(function(){
  var $hc = $('.half-color');
  var str = $hc.text();
  $hc.html("");

  var i = 0;
  var chars;
  var dupText;

  while(i < str.length){
    chars = str[i];
    if(chars == " ") chars = "&nbsp;";
    dupText = "<span>" + chars + "</span>";

    var firstHalf = $(dupText);
    var secondHalf = $(dupText);

    $hc.append(firstHalf)
    $hc.append(secondHalf)

    var width = firstHalf.width()/2;

    firstHalf.width(width);
    secondHalf.css('text-indent', -width);

    i++;
  }
});

.half-color span{
  font-size: 2em;
  display: inline-block;
  overflow: hidden;
}
.half-color span:nth-child(even){
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="half-color">This is a sentence</div>

Limited CSS and jQuery Solution

I am not sure how elegant this solution is, but it cuts everything exactly in half: http://jsfiddle.net/9wxfY/11/

Otherwise, I have created a nice solution for you... All you need to do is have this for your HTML:

Take a look at this most recent, and accurate, edit as of 6/13/2016 : http://jsfiddle.net/9wxfY/41/

As for the CSS, it is very limited... You only need to apply it to :nth-child(even)

$(function(){
  var $hc = $('.half-color');
  var str = $hc.text();
  $hc.html("");

  var i = 0;
  var chars;
  var dupText;

  while(i < str.length){
    chars = str[i];
    dupText = "<span>" + chars + "</span>";

    var firstHalf = $(dupText);
    var secondHalf = $(dupText);

    $hc.append(firstHalf)
    $hc.append(secondHalf)

    var width = firstHalf.width()/2;

    firstHalf.width(width);
    secondHalf.css('text-indent', -width);

    i++;
  }
});

.half-color span{
  font-size: 2em;
  display: inline-block;
  overflow: hidden;
}
.half-color span:nth-child(even){
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="half-color">This is a sentence</div>

Limited CSS and jQuery Solution

I am not sure how elegant this solution is, but it cuts everything exactly in half: http://jsfiddle.net/9wxfY/11/

Otherwise, I have created a nice solution for you... All you need to do is have this for your HTML:

Take a look at this most recent, and accurate, edit as of 6/13/2016 : http://jsfiddle.net/9wxfY/43/

As for the CSS, it is very limited... You only need to apply it to :nth-child(even)

$(function(){
  var $hc = $('.half-color');
  var str = $hc.text();
  $hc.html("");

  var i = 0;
  var chars;
  var dupText;

  while(i < str.length){
    chars = str[i];
    if(chars == " ") chars = "&nbsp;";
    dupText = "<span>" + chars + "</span>";

    var firstHalf = $(dupText);
    var secondHalf = $(dupText);

    $hc.append(firstHalf)
    $hc.append(secondHalf)

    var width = firstHalf.width()/2;

    firstHalf.width(width);
    secondHalf.css('text-indent', -width);

    i++;
  }
});

.half-color span{
  font-size: 2em;
  display: inline-block;
  overflow: hidden;
}
.half-color span:nth-child(even){
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="half-color">This is a sentence</div>

Convert example to a snippet

Source Link

edit approved Aug 5, 2016 at 11:44

Al Foиce ѫ

4.3k
12
42
50

As for the CSS, it is very limited... You only need to apply it to `:nth-child(even)` CSS

.half-color span{
    font-size: 2em;
    display: inline-block;
    overflow: hidden;
}
.half-color span:nth-child(even){
    color: red;
}

HTML

<div class="half-color">This is a sentence</div>

As for the CSS, it is very limited... You only need to apply it to :nth-child(even)

jQuery

$(function(){
  var $hc = $('.half-color');
  var str = $hc.text();
  $hc.html("");

  var i = 0;
  var chars;
  var dupText;

  while(i < str.length){
    chars = str[i];
    dupText = "<span>" + chars + "</span>";

    var firstHalf = $(dupText);
    var secondHalf = $(dupText);

    $hc.append(firstHalf)
    $hc.append(secondHalf)

    var width = firstHalf.width()/2;

    firstHalf.width(width);
    secondHalf.css('text-indent', -width);

    i++;
  }
});

.half-color span{
  font-size: 2em;
  display: inline-block;
  overflow: hidden;
}
.half-color span:nth-child(even){
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="half-color">This is a sentence</div>

$(function(){
    var $hc = $('.half-color');
    var str = $hc.text();
    $hc.html("");
    
    var i = 0;
    var chars;
    var dupText;
    
    while(i < str.length){
        chars = str[i];
        dupText = "<span>" + chars + "</span>";
        
        var firstHalf = $(dupText);
        var secondHalf = $(dupText);
        
        $hc.append(firstHalf)
        $hc.append(secondHalf)
        
        var width = firstHalf.width()/2;
        
        firstHalf.width(width);
        secondHalf.css('text-indent', -width);
        
        i++;
    }
});

As for the CSS, it is very limited... You only need to apply it to `:nth-child(even)` CSS

.half-color span{
    font-size: 2em;
    display: inline-block;
    overflow: hidden;
}
.half-color span:nth-child(even){
    color: red;
}

HTML

<div class="half-color">This is a sentence</div>

jQuery

$(function(){
    var $hc = $('.half-color');
    var str = $hc.text();
    $hc.html("");
    
    var i = 0;
    var chars;
    var dupText;
    
    while(i < str.length){
        chars = str[i];
        dupText = "<span>" + chars + "</span>";
        
        var firstHalf = $(dupText);
        var secondHalf = $(dupText);
        
        $hc.append(firstHalf)
        $hc.append(secondHalf)
        
        var width = firstHalf.width()/2;
        
        firstHalf.width(width);
        secondHalf.css('text-indent', -width);
        
        i++;
    }
});

As for the CSS, it is very limited... You only need to apply it to :nth-child(even)

$(function(){
  var $hc = $('.half-color');
  var str = $hc.text();
  $hc.html("");

  var i = 0;
  var chars;
  var dupText;

  while(i < str.length){
    chars = str[i];
    dupText = "<span>" + chars + "</span>";

    var firstHalf = $(dupText);
    var secondHalf = $(dupText);

    $hc.append(firstHalf)
    $hc.append(secondHalf)

    var width = firstHalf.width()/2;

    firstHalf.width(width);
    secondHalf.css('text-indent', -width);

    i++;
  }
});

.half-color span{
  font-size: 2em;
  display: inline-block;
  overflow: hidden;
}
.half-color span:nth-child(even){
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="half-color">This is a sentence</div>

added 39 characters in body

Source Link

edited Jul 12, 2016 at 19:03

Adjit

10.2k
12
55
101

Loading

Updated jQuery code to be more accurate at splitting the character in half

Source Link

edited Jun 13, 2016 at 17:11

Adjit

10.2k
12
55
101

Loading

Copy edited. Removed histotical information (ref. <http://meta.stackexchange.com/a/230693>).

Source Link

edited May 11, 2014 at 19:57

Peter Mortensen

31.4k
22
109
132

Loading

added 126 characters in body

Source Link

edited May 9, 2014 at 17:50

Adjit

10.2k
12
55
101

Loading

added 312 characters in body

Source Link

edited May 9, 2014 at 17:09

Adjit

10.2k
12
55
101

Loading

Source Link

created May 9, 2014 at 16:39

Adjit

10.2k
12
55
101

Loading

Collectives™ on Stack Overflow

Return to Answer

As for the CSS, it is very limited... You only need to apply it to `:nth-child(even)` CSS

HTML

jQuery

As for the CSS, it is very limited... You only need to apply it to `:nth-child(even)` CSS

HTML

jQuery

Collectives™ on Stack Overflow

Return to Answer

As for the CSS, it is very limited... You only need to apply it to :nth-child(even) CSS

HTML

jQuery

As for the CSS, it is very limited... You only need to apply it to :nth-child(even) CSS

HTML

jQuery

As for the CSS, it is very limited... You only need to apply it to `:nth-child(even)` CSS

As for the CSS, it is very limited... You only need to apply it to `:nth-child(even)` CSS