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

問題是沒有使用強大的顯示內聯塊。 你現在可以試試

 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

logo/::before 沒有直接連接到主要元素（包含單詞 mongoose）。 您可能會嘗試將它們強制與width: max-content;

所以嘗試添加

strong { width: max-content; }