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