CSS Selectors not following text - weird behavior

Question

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? Thanks!

Answer 1

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>

Answer 2

The logo/::before isnt directly connected to to the main element (containig the word mongoose). you could maybe attempt to force them on the same line with width: max-content;

so try adding

strong { width: max-content; }