half-highlighter on the word with rounded borders

Question

I need a help with word highlighter which should be half a word and with borders enter image description here I tried the following parameters, but it can't give a round corner, is there another way to css the word to look like the image?

background: linear-gradient(transparent,transparent 42%,#ff0 0,#ff0 85%,transparent 0) no-repeat;

I could not get the result with round borders

Answer 1

Use a pseudo-element positioned behind the word.

span {
  display: inline-block;
  position: relative;
  font-size: 3rem;
  padding: 0.25em;
}

span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 50%;
  background: orange;
  z-index: -1;
  border-radius: .25em;
}

<span>Highlighted</span>