Блог

У меня есть этот селектор 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;
}
 

Это происходит каждый раз, когда слово на краю переходит к следующей строке. Может кто-нибудь сказать мне, что я могу сделать, чтобы предотвратить это, и пусть селектор всегда будет с текстом? Спасибо!

Проблема заключалась в том, что внутри 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> 

Логотип/::before напрямую не связан с основным элементом (содержит слово mongoose). возможно, вы могли бы попытаться принудительно поместить их в одну строку с width: max-content;

поэтому попробуйте добавить

strong { width: max-content; }