Search code examples
cssoutline

Possible to create a double outline for number with css?


Is it possible to create a double outline for number how you see in below picture (I mean the green and white outline)

enter image description here

Any idea?


Solution

  • Depending on the browsers you need to support, it's not the exact same effect, but you could achieve something similar with a combination of text-shadow and -webkit-text-stroke.

       text-shadow: 4px 4px 0 green;
      -webkit-text-stroke: 2px white;
    

    https://jsfiddle.net/agentfitz/rs27av43/4/

    Here is another (perhaps better) option using ::before and custom data attributes - props to the Code Carnivore for this intelligent solution)

    https://jsfiddle.net/0wn2ok4g/2/