CODEWITHSUNDEEP
csshtml
jd1138
jd1138

Reputation: 69

Change one character only using CSS content

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.

Upvotes: 0

Views: 1174

Answers (3)

Cheslab
Cheslab

Reputation: 1924

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;
}

Upvotes: 1

Ondra Koupil
Ondra Koupil

Reputation: 1073

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.

Upvotes: 0

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

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

Upvotes: 1

Related Questions