Style Different Characters Inside: :After Content

How do you have two font colors for a single style using the ::after pseudo-element?

When you can not alter the source for all form fields and append an extra element for this purpose, one chance would be to use ::before and ::after and change the display direction for the desired effect.

label.control-label{  display: flex;}
label.control-label::before{  content: ':';  order: 2;}
label.control-label.required::after{   content: '*';   color: red;   order: 1;}

<label class="control-label">Just a label</label><label class="control-label required">Required label</label>

Style certain characters with CSS

That's not possible in CSS. Your only option would be first-letter and that's not going to cut it. Either use JavaScript or (as you stated in your comments), your server-side language.

Add line break to ::after or ::before pseudo-element content

The content property states:

Authors may include newlines in the generated content by writing the "\A" escape sequence in one of the strings after the 'content' property. This inserted line break is still subject to the 'white-space' property. See "Strings" and "Characters and case" for more information on the "\A" escape sequence.

So you can use:

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

http://jsfiddle.net/XkNxs/

When escaping arbitrary strings, however, it's advisable to use \00000a instead of \A, because any number or [a-f] character followed by the new line may give unpredictable results:

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}

Adding characters (using CSS) in front of the text

You can use the pseudo :before and :after selector.
Check out the below solution.

td[data-monetary-amount]:after,
    td[data-monetary-amount^="+"] {
      content: attr(data-monetary-amount);
      color: green;
    }
    td[data-monetary-amount^="+"]:before{
    content: '↑';
    }
    td[data-monetary-amount^="-"]:after {
      color: red;
    }
    td[data-monetary-amount^="-"]:before{
    content: '↓';
    color: red;
    }

<table border="1">
      <tr>
        <td data-monetary-amount="+23"></td>
      </tr>
      <tr>
        <td data-monetary-amount="-20"></td>
      </tr>
    </table>

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

Now on GitHub as a Plugin!

Feel free to fork and improve.

Demo | Download Zip | Half-Style.com (Redirects to GitHub)

---

• Pure CSS for a Single Character
• JavaScript used for automation across text or multiple characters
• Preserves Text Accessibility for screen readers for the blind or visually
  impaired

Part 1: Basic Solution

Demo: http://jsfiddle.net/arbel/pd9yB/1694/

---

This works on any dynamic text, or a single character, and is all automated. All you need to do is add a class on the target text and the rest is taken care of.

Also, the accessibility of the original text is preserved for screen readers for the blind or visually impaired.

Explanation for a single character:

Pure CSS. All you need to do is to apply .halfStyle class to each element that contains the character you want to be half-styled.

For each span element containing the character, you can create a data attribute, for example here data-content="X", and on the pseudo element use content: attr(data-content); so the .halfStyle:before class will be dynamic and you won't need to hard code it for every instance.

Explanation for any text:

Simply add textToHalfStyle class to the element containing the text.

---

// jQuery for automated modejQuery(function($) {    var text, chars, $el, i, output;
    // Iterate over all class occurences    $('.textToHalfStyle').each(function(idx, el) {    $el = $(el);    text = $el.text();    chars = text.split('');
    // Set the screen-reader text    $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');
    // Reset output for appending    output = '';
    // Iterate over all chars in the text    for (i = 0; i < chars.length; i++) {        // Create a styled element for each character and append to container        output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';    }
    // Write to DOM only once    $el.append(output);  });});

.halfStyle {    position: relative;    display: inline-block;    font-size: 80px; /* or any font size will work */    color: black; /* or transparent, any color */    overflow: hidden;    white-space: pre; /* to preserve the spaces from collapsing */}
.halfStyle:before {    display: block;    z-index: 1;    position: absolute;    top: 0;    left: 0;    width: 50%;    content: attr(data-content); /* dynamic content for the pseudo element */    overflow: hidden;    color: #f00;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Single Characters:</p><span class="halfStyle" data-content="X">X</span><span class="halfStyle" data-content="Y">Y</span><span class="halfStyle" data-content="Z">Z</span><span class="halfStyle" data-content="A">A</span>
<hr/><p>Automated:</p>
<span class="textToHalfStyle">Half-style, please.</span>

How to apply CSS to the first letter after :before content?

In case you can not edit the HTML without JavaScript for example, you can use pure CSS so long as you are styling the :before or :after content of a "block-level" element.

p:before {
  content: 'Wisdom'
}

p:first-letter {
  font-size: 7vw;
}

<p></p>

How can I style a part of a single character with overlays using a dynamic width?

While playing around with a demo fiddle, i figured it out myself and wanted to share my solution. It's quite simple.

First things first: The DEMO

To partly style a single character, you need extra markup for your content. Basically, you need to duplicate it:

<​div class="content"> 
    <span class="overlay">X</span>
    X
</div>

Using pseudo-elements like :after or :before would be nicer, but i didn't found a way to do that.

The overlay needs to be positioned absolutely to the content element:

​.content {
    display: inline-block;
    position: relative;
    color: black;
}

​.overlay {
    width: 50%;
    position: absolute;
    color: red;
    overflow: hidden;
}​

Do not forget overflow: hidden; in order to cut off the remaing part of the "X".

You can use any width instead of 50% which makes this approach very flexible. You can even use a custom height, other CSS attributes or a combination of multiple attributes.

Extended DEMO

---

Related Topics