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

Commonmark migration

Source Link

edited Jun 20, 2020 at 9:12

Community Bot

1
1

Example

##JSFiddle DEMO

JSFiddle DEMO

We'll do it using just CSS pseudo selectors!

This technique will work with dynamically generated content and different font sizes and widths.

HTML:

<div class='split-color'>Two is better than one.</div>

CSS:

.split-color > span { white-space: pre-line; position: relative; color: #409FBF; } .split-color > span:before { content: attr(data-content); pointer-events: none; /* Prevents events from targeting pseudo-element */ position: absolute; overflow: hidden; color: #264A73; width: 50%; z-index: 1; }

To wrap the dynamically generated string, you could use a function like this:

// Wrap each letter in a span tag and return an HTML string // that can be used to replace the original text function wrapString(str) { var output = []; str.split('').forEach(function(letter) { var wrapper = document.createElement('span'); wrapper.dataset.content = wrapper.innerHTML = letter; output.push(wrapper.outerHTML); }); return output.join(''); } // Replace the original text with the split-color text window.onload = function() { var el = document.querySelector('.split-color'), txt = el.innerHTML; el.innerHTML = wrapString(txt); }

Example

##JSFiddle DEMO

We'll do it using just CSS pseudo selectors!

This technique will work with dynamically generated content and different font sizes and widths.

HTML:

<div class='split-color'>Two is better than one.</div>

CSS:

.split-color > span { white-space: pre-line; position: relative; color: #409FBF; } .split-color > span:before { content: attr(data-content); pointer-events: none; /* Prevents events from targeting pseudo-element */ position: absolute; overflow: hidden; color: #264A73; width: 50%; z-index: 1; }

To wrap the dynamically generated string, you could use a function like this:

// Wrap each letter in a span tag and return an HTML string // that can be used to replace the original text function wrapString(str) { var output = []; str.split('').forEach(function(letter) { var wrapper = document.createElement('span'); wrapper.dataset.content = wrapper.innerHTML = letter; output.push(wrapper.outerHTML); }); return output.join(''); } // Replace the original text with the split-color text window.onload = function() { var el = document.querySelector('.split-color'), txt = el.innerHTML; el.innerHTML = wrapString(txt); }

Example

JSFiddle DEMO

We'll do it using just CSS pseudo selectors!

This technique will work with dynamically generated content and different font sizes and widths.

HTML:

<div class='split-color'>Two is better than one.</div>

CSS:

.split-color > span { white-space: pre-line; position: relative; color: #409FBF; } .split-color > span:before { content: attr(data-content); pointer-events: none; /* Prevents events from targeting pseudo-element */ position: absolute; overflow: hidden; color: #264A73; width: 50%; z-index: 1; }

To wrap the dynamically generated string, you could use a function like this:

// Wrap each letter in a span tag and return an HTML string // that can be used to replace the original text function wrapString(str) { var output = []; str.split('').forEach(function(letter) { var wrapper = document.createElement('span'); wrapper.dataset.content = wrapper.innerHTML = letter; output.push(wrapper.outerHTML); }); return output.join(''); } // Replace the original text with the split-color text window.onload = function() { var el = document.querySelector('.split-color'), txt = el.innerHTML; el.innerHTML = wrapString(txt); }

deleted 2 characters in body

Source Link

edited May 11, 2014 at 19:54

Peter Mortensen

31.4k
22
110
134

Example

##JSFiddle DEMO

We'll do it using just cssCSS pseudo selectors!

This technique will work with dynamically generated content and different font sizes and widths.

HTML:

<div class='split-color'>Two is better than one.</div>

CSS:

.split-color > span { white-space: pre-line; position: relative; color: #409FBF; } .split-color > span:before { content: attr(data-content); pointer-events: none; /* Prevents events from targeting pseudo-element */ position: absolute; overflow: hidden; color: #264A73; width: 50%; z-index: 1; }

To wrap the dynamically generated string, you could use a function like this:

// Wrap each letter in a span tag and return an HTML string // that can be used to replace the original text function wrapString(str) { var output = []; str.split('').forEach(function(letter) { var wrapper = document.createElement('span'); wrapper.dataset.content = wrapper.innerHTML = letter; output.push(wrapper.outerHTML); }); return output.join(''); } // Replace the original text with the split-color text window.onload = function() { var el = document.querySelector('.split-color'), txt = el.innerHTML; el.innerHTML = wrapString(txt); }

Example

##JSFiddle DEMO

We'll do it using just css pseudo selectors!

This technique will work with dynamically generated content and different font sizes and widths.

HTML:

<div class='split-color'>Two is better than one.</div>

CSS:

.split-color > span { white-space: pre-line; position: relative; color: #409FBF; } .split-color > span:before { content: attr(data-content); pointer-events: none; /* Prevents events from targeting pseudo-element */ position: absolute; overflow: hidden; color: #264A73; width: 50%; z-index: 1; }

To wrap the dynamically generated string, you could use a function like this:

// Wrap each letter in a span tag and return an HTML string // that can be used to replace the original text function wrapString(str) { var output = []; str.split('').forEach(function(letter) { var wrapper = document.createElement('span'); wrapper.dataset.content = wrapper.innerHTML = letter; output.push(wrapper.outerHTML); }); return output.join(''); } // Replace the original text with the split-color text window.onload = function() { var el = document.querySelector('.split-color'), txt = el.innerHTML; el.innerHTML = wrapString(txt); }

Example

##JSFiddle DEMO

We'll do it using just CSS pseudo selectors!

This technique will work with dynamically generated content and different font sizes and widths.

HTML:

<div class='split-color'>Two is better than one.</div>

CSS:

.split-color > span { white-space: pre-line; position: relative; color: #409FBF; } .split-color > span:before { content: attr(data-content); pointer-events: none; /* Prevents events from targeting pseudo-element */ position: absolute; overflow: hidden; color: #264A73; width: 50%; z-index: 1; }

To wrap the dynamically generated string, you could use a function like this:

// Wrap each letter in a span tag and return an HTML string // that can be used to replace the original text function wrapString(str) { var output = []; str.split('').forEach(function(letter) { var wrapper = document.createElement('span'); wrapper.dataset.content = wrapper.innerHTML = letter; output.push(wrapper.outerHTML); }); return output.join(''); } // Replace the original text with the split-color text window.onload = function() { var el = document.querySelector('.split-color'), txt = el.innerHTML; el.innerHTML = wrapString(txt); }

added 31 characters in body

Source Link

edited May 10, 2014 at 19:57

wvandaal

4.3k
2
18
27

Example

##JSFiddle DEMO JSFiddle DEMO

We'll do it using just css pseudo selectors!

This technique will work with dynamically generated content and different font sizes and widths.

HTML:

<div class='split-color'>Two is better than one.</div>

CSS:

.split-color > span { white-space: pre-line; position: relative; color: #409FBF; } .split-color > span:before { content: attr(data-content); pointer-events: none; /* Prevents events from targeting pseudo-element */ position: absolute; overflow: hidden; color: #264A73; width: 50%; z-index: 1; }

To wrap the dynamically generated string, you could use a function like this:

// Wrap each letter in a span tag and return an HTML string // that can be used to replace the original text function wrapString(str) { var output = []; str.split('').forEach(function(letter) { var wrapper = document.createElement('span'); wrapper.dataset.content = wrapper.innerHTML = letter; output.push(wrapper.outerHTML); }); return output.join(''); } // Replace the original text with the split-color text window.onload = function() { var el = document.querySelector('.split-color'), txt = el.innerHTML; el.innerHTML = wrapString(txt); }

Example

##JSFiddle DEMO

We'll do it using just css pseudo selectors!

This technique will work with dynamically generated content and different font sizes and widths.

HTML:

<div class='split-color'>Two is better than one.</div>

CSS:

.split-color > span { white-space: pre-line; position: relative; color: #409FBF; } .split-color > span:before { content: attr(data-content); position: absolute; overflow: hidden; color: #264A73; width: 50%; z-index: 1; }

To wrap the dynamically generated string, you could use a function like this:

// Wrap each letter in a span tag and return an HTML string // that can be used to replace the original text function wrapString(str) { var output = []; str.split('').forEach(function(letter) { var wrapper = document.createElement('span'); wrapper.dataset.content = wrapper.innerHTML = letter; output.push(wrapper.outerHTML); }); return output.join(''); } // Replace the original text with the split-color text window.onload = function() { var el = document.querySelector('.split-color'), txt = el.innerHTML; el.innerHTML = wrapString(txt); }

Example

##JSFiddle DEMO

We'll do it using just css pseudo selectors!

This technique will work with dynamically generated content and different font sizes and widths.

HTML:

<div class='split-color'>Two is better than one.</div>

CSS:

.split-color > span { white-space: pre-line; position: relative; color: #409FBF; } .split-color > span:before { content: attr(data-content); pointer-events: none; /* Prevents events from targeting pseudo-element */ position: absolute; overflow: hidden; color: #264A73; width: 50%; z-index: 1; }

To wrap the dynamically generated string, you could use a function like this:

// Wrap each letter in a span tag and return an HTML string // that can be used to replace the original text function wrapString(str) { var output = []; str.split('').forEach(function(letter) { var wrapper = document.createElement('span'); wrapper.dataset.content = wrapper.innerHTML = letter; output.push(wrapper.outerHTML); }); return output.join(''); } // Replace the original text with the split-color text window.onload = function() { var el = document.querySelector('.split-color'), txt = el.innerHTML; el.innerHTML = wrapString(txt); }