Add stroke around text - on the outside - with css?

Answer 1

One way I found was to stack two elements on each other having the element that stays behind get the double stroke width. The element behind leaks the stroke to the outside of the visible element making it a true stroke outside.

Also, another option is to use :after to create this second element. The downside is that you can't programmatically change the stroke

This might not work properly on big stroke values.

body { background-color: gray; }
h1 {
  color: white;
  font-size: 2.5em;
  font-family: verdana;
}

.stroke { -webkit-text-stroke: 2px black; }

.stack .stroke { -webkit-text-stroke: 4px black; }
h1.stroke-fs { font-size: 2.7em; }

.stack { position: relative; }
.stack > h1:not(:first-child) {
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
}


.stroke-after:after { 
  -webkit-text-stroke: 4px black;
  content: attr(value);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

Stack

  
WHAT CARRER SHOULD YOU HAVE ?
  
WHAT CARRER SHOULD YOU HAVE ?




After

  
WHAT CARRER SHOULD YOU HAVE ?




Native
WHAT CARRER SHOULD YOU HAVE ?



Font size
WHAT CARRER SHOULD YOU HAVE ?