Change one character only using CSS content

Question

I inherited code that layers up a font heading - multiple divs draw the font - like this:

<div class = 'stage'>
    <div class = 'layer'></div>
    <div class = 'layer'></div>
    <div class = 'layer'></div>
    <div class = 'layer'></div>
</div>

The text itself is defined in the css under "layer.after" as "content: "xyz!"".

My aim is to style the "!" in "XYZ" in a different font... if the content was in the HTML section I could just add a span.

But here, my text is defined in Content in css.... How can I style the last letter differently than the rest in this type of setup, or add a span to the css, or even a short script to change the last letter (!) to a different font? I've tried last letter selector to no avail.

Community · Accepted Answer · 2017-05-23 12:14:04Z

1

Using pseudoclasses on pseudoelements is not allowed. Therefore what you want is not possible without changing existing code.

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jul 20, 2015 at 14:15

Niels Keurentjes

42.1k9 gold badges103 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ilya Streltsyn Over a year ago

Actually, it can be kind of achieved by applying pseudo elements to pseudo elements (like "intersecting" them). But this hack has too many limitations to be usable in practice.

Cheslab · Accepted Answer · 2015-07-20 14:23:07Z

1

Is there some actual text in HTML? If not you can use ::before for your text and ::after for "!" - JSFiddle

CSS

.layer::before { 
    content: 'xyz';
    color: blue;
    font-weight: bold;
}
.layer::after { 
    content: '!';
    color: red;
    font-weight: bold;
}

answered Jul 20, 2015 at 14:23

Cheslab

1,9242 gold badges17 silver badges27 bronze badges

Comments

Ondra Koupil · Accepted Answer · 2015-07-20 14:21:40Z

0

You'll need to use some script if changing the markup is not an option.

If you have jQuery available, try something like this:

$(function() {

  $(".stage .layer").each(function() {
    var content = $(this).html();
    content = content.substr(0, content.length - 1)
      + "<span>"
      + content.substr(-1)
      + "</span>";
    $(this).html(content);
  });


})

See http://codepen.io/ondrakoupil/pen/VLBoXR for live example.

answered Jul 20, 2015 at 14:21

Ondra Koupil

1,0816 silver badges11 bronze badges

Collectives™ on Stack Overflow

Change one character only using CSS content

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related