CSS 选择器不跟随文本 - 奇怪的行为

Question

我的 css 选择器运行异常。它是在文本周围创建一个圆圈突出显示。但是当文本转到下一行时，圆圈不会跟随它。我的意思如下图所示，

如您所见，单词 'Mongoose' 没有选择器，选择器在上面一行。这是我的 SCSS 代码，

<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;
}

每次边缘的单词换行到下一行时都会发生这种情况。有人能告诉我我能做些什么来防止这种情况发生，并让选择器始终与文本一起出现吗？谢谢！

Answer 1

logo/::before 没有直接连接到主要元素（包含单词 mongoose）。你也许可以尝试强迫他们与 width: max-content;

在同一条线上

所以尝试添加

strong { width: max-content; }

Answer 2

问题不是在 strong 中使用显示内联块。您现在可以试试

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>

CSS 选择器不跟随文本 - 奇怪的行为

CSS Selectors not following text - weird behavior

html

css

stylesheet