CSS Selectors not following text - weird behavior

Issue

I have this css selector which is working weirdly. It's to create a circle highlight around a text. But When the text goes to the next line, the circle doesn't follow it. What I mean is given in the image below,

Like you see, the word 'Mongoose' doesn't have the selector and the selector is on the line above. This is my SCSS code,

<div>
  front-end framework, <strong>Bootstrap</strong>, which is a front-end styling framework, 
  HTML and CSS. Vue.js can be used to make <strong>AJAX</strong> requests, make flexible 
  and stable websites. Vue.js makes axios requests to the server that is built upon Node.js. 
  <strong>ExpressJS</strong> is a library for Noe that includes a tonne of functions to 
  handle requests and send reponses back to front-ends. The database being used is MongoDB. 
  <strong>Mongoose</strong> is a javascript library that bridges the gap between mongo 
  shell commands and javascript. Furthermore, the web
</div>

strong {
  position:relative;
  color: $color-grey-1 !important;
}

strong:before {
  content:"";
  z-index:-1;
  top:-0.1em;
  border-width: 3px;
  border-style:solid;
  border-color: $color-yellow;
  position:absolute;
  border-right-color:transparent;
  width:100%;
  height:1em;
  transform:rotate(2deg);
  border-radius:50%;
  padding:0.1em 0.25em;
  display: inline-block;
}

This happens every time the word on the edge breaks to the next line. Can someone tell me what I can do to prevent that, and let the selector always be with the text?

Solution

The issue was not using the display inline block inside strong. You can try now

strong {
    position:relative;
    color: grey !important;
  display: inline-block;
  
  }
  
  strong::before {
    
    content:"";
    z-index:-1;
    top:-0.1em;
    border-width: 3px;
    border-style:solid;
    border-color: yellow;
    position:absolute;
    border-right-color:transparent;
    width:100%;
    height: 1em;
    transform:rotate(2deg);
    border-radius:50%;
    padding:0.1em 0.25em;
   
  }

<div>
  front-end framework, <strong>Bootstrap</strong>, which is a front-end styling framework, 
  HTML and CSS. Vue.js can be used to make <strong>AJAX</strong> requests, make flexible 
  and stable websites. Vue.js makes axios requests to the server that is built upon Node.js. 
  <strong>ExpressJS</strong> is a library for Noe that includes a tonne of functions to 
  handle requests and send reponses back to front-ends. The database being used is MongoDB. 
  <strong>Mongoose</strong> is a javascript library that bridges the gap between mongo 
  shell commands and javascript. Furthermore, the web
</div>

Answered By - Josue Murhabazi