Style certain characters with CSS

by

Hi I know you said in CSS but as everybody told you, you can’t, this is a javascript solution, just my 2 cents.

best…

JSFiddle

css

span.highlight{
   background:#F60;
    padding:5px;
    display:inline-block;
    color:#FFF;
}

p{
   font-family:Verdana;   
}

html

<p>
    Let's go Zapata let's do it for the revolution, Zapatistas!!!   
</p>

javascript

jQuery.fn.highlight = function (str, className) {    
    var regex = new RegExp(str, "gi");

    return this.each(function () {
        this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
    });
};

$("p").highlight("Z","highlight");

Result
enter image description here

More Related Contents:

  1. CSS positioning things differently between browsers [closed]
  2. blur everything but hovered CSS
  3. Complex CSS selector for parent of active child [duplicate]
  4. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  5. How do I conditionally apply CSS styles in AngularJS?
  6. CSS transition effect makes image blurry / moves image 1px, in Chrome?
  7. CSS3 Transparency + Gradient
  8. See :hover state in Chrome Developer Tools
  9. Why did Bootstrap 3 switch to box-sizing: border-box?
  10. CSS: fixed position on x-axis but not y?
  11. How can I change the Bootstrap 4 navbar button icon color?
  12. CSS Auto hide elements after 5 seconds
  13. How to keep wrapped flex-items the same width as the elements on the previous row?
  14. Replacing H1 text with a logo image: best method for SEO and accessibility?
  15. CSS: fixed to bottom and centered
  16. CSS3 Fade Effect
  17. Why don’t margin-top: auto and margin-bottom:auto work the same as their left and right counterparts?
  18. CSS: Animation vs. Transition
  19. How would you make two s overlap?
  20. How to get these two divs side-by-side?
  21. Why use an HTML5 semantic tag instead of div? [duplicate]
  22. Hover on child should turn off hover effect on parent [duplicate]
  23. iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue
  24. How can I create multi columns from a single unordered list?
  25. Are there any cons to using color names in place of color codes in CSS?
  26. CSS width 100% OR max-width in pixels
  27. Using SVG as background image
  28. What is the difference between default, user and author style sheets?
  29. There is a 4px gap below canvas/video/audio elements in HTML5
  30. What is the difference between background-size: cover; and background-size: 100%;?

Leave a Comment