Add outside stroke to the text with css-CodePudding

How to add outside stroke for the text. I tried with -webkit-text-stroke: 10px black; and text-shadow but my text becomes thinner, I want to have font size 24px.

p {
  color: #fff;
  text-shadow: -1px -1px 0 #844733, 1px -1px 0 #844733, -1px 1px 0 #844733, 1px 1px 0 #844733;
  
  font-size: 24px;
}

<p>my text</p>

here is the image -> [1]: https://i.stack.imgur.com/5xMgn.png

I wanted very thick stroke and only outlide

CodePudding user response：

@import "compass/css3";

-webkit-text-stroke: width of stroke;

this one is pretty smooth

CodePudding user response：

You can use a pseudo element with identical text content to the main text and give the pseudo element the text-stroke. It was shown on CSS Tricks.

p {
  color: #fff;
  font-size: 24px;
  position: relative
}
p:after {
  content: attr(data-text);
  -webkit-text-stroke: 6px #844733;
  color: #844733;
  position: absolute;
  left: 0;
  z-index: -1
}

<p data-text="my text">my text</p>