Since it’s Black Friday I decided to write about something that has no relation to Black Friday at all. I guess it was a good decision, this is not that kind of a blog.

So I have choosen an easy subject with easy methods to implement. We want stroke on text but the css native method to do that is so poor at browser support at this time being that I almost didn’t wanted to talk about this. Still let’s mention this method:


- webkit-text-stroke:
- webkit-text-fill-color:
- webkit-text-stroke-width:
- webkit-text-stroke-color:

These methods have no IE support, Firefox support, they are for now webkit specific. So after mentioning this we can go forward and forget about this.

What we need is an alternative solution, actually I have 2 solutions in my glows. One involves text-shadow and the second :after or :before pseudo elements.

First we need to clone the text and put behind it and center it. The text shadow property without any blur does that job.

   p {
      color:#fff;
      text-shadow: 0 0 0 red
   }

To make the stroke wider we have to put a text-shadow on each direction, first parameter meaning the horizontal shadow and the second the vertical shadow:

 text-shadow:  
     -1px -1px 0 red,  
      1px -1px 0 red,
      -1px 1px 0 red,
       1px 1px 0 red,
      -2px -2px 0 red,  
      2px -2px 0 red,
      -2px 2px 0 red,
       2px 2px 0 red,
     -3px -3px 0 red,  
      3px -3px 0 red,
      -3px 3px 0 red,
       3px 3px 0 red;

The advantage of using text-shadow is that you can use different colors for each stroke line rainbow style.

Note: The stroke can not be performed on transparent text, because text-shadows are filled with color not empty inside, so when you try to make the text transparent and apply shadow this happens:

The other solution was that we could use :after or :before pseudo elements. The benefit of this is that it is also supported IE8-9 in comparision with text-shadow but the downfall of this solution is that we have to specify all the text again in a data-text attribute.

p {
   position:relative;
   color:#fff
}
p:after {
   content:attr(data-text);
   position:absolute;
   top:0;
   left:0;
   z-index:-1
}