How Do I Add A Highlight Behind The Text Via Css So It Looks Like Instagram-one Below?

I'm quite new to CSS\HTML. How do I do the same way via CSS: I've tried this: But it doesn't look the way how it possibly could be like in an Instagram story editor. I need somet

Solution 1:

You can use box-decoration-break: clone; then consider an SVG filter to make the effect better.

Update the stdDeviation variable to controle the shape:

.works_title {
  display: inline;
  padding: 4px6px;
  line-height:1.4; /* adjust this to avoid overlapping the padding */font-size: 28px;
  font-weight: 700;
  color: aliceblue;
  background-color: red;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  filter: url('#instagram');
}
.no-filter {
  filter:none;
}

body {
  max-width: 250px;
}

<divclass="works_title">Something longlike a title with bunchofletters a more text</div><br><br><divclass="works_title no-filter">Something longlike a title with bunchofletters a more text</div><svgstyle="visibility: hidden; position: absolute;"width="0"height="0"xmlns="http://www.w3.org/2000/svg"version="1.1"><defs><filterid="instagram"><feGaussianBlurin="SourceGraphic"stdDeviation="5"result="blur" /><feColorMatrixin="blur"mode="matrix"values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -8"result="goo" /><feCompositein="SourceGraphic"in2="goo"operator="atop"/></filter></defs></svg>