Есть ли альтернативные <span>?

Question

Я уже использовал <span> в своем коде через .js для полужирного текста в моей CMS, скажем, названия. Теперь я просто хочу добавить синий текст за текст заголовка, как показано ниже, но без использования фона растягивается.

Я хочу, чтобы мой фон отвечал на длину ввода текста, и это самый простой способ без скремблирования всего кода. Является ли это возможным?

body {} img { 
 
    width: 100%; 
 
} 
 
.h { 
 
    font-family: "Arial"; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    color: #FFF; 
 
} 
 
.h span { 
 
    position: relative; 
 
    background-color: #00A0E8; 
 
    padding-left: 18px; 
 
    padding-right: 18px; 
 
    padding-top: 3px; 
 
    padding-bottom: 3px; 
 
} 
 
.square { 
 
    position: relative; 
 
    background-color: #00A0E8; 
 
    padding-left: 18px; 
 
    padding-right: 18px; 
 
    padding-top: 3px; 
 
    padding-bottom: 3px; 
 
}

<div class="h"><span><b>I WANT</b> THIS</span> 
 
</div> 
 

 
<br> 
 
<br> 
 
<div class="h"> 
 
    <div class="square"><b>I GET</b> THIS</div> 
 
</div>

.

Answer 1

Просто добавьте display:inline-block; в .square класс.

body {} img { 
 
    width: 100%; 
 
} 
 
.h { 
 
    font-family: "Arial"; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    color: #FFF; 
 
} 
 
.h span { 
 
    position: relative; 
 
    background-color: #00A0E8; 
 
    padding-left: 18px; 
 
    padding-right: 18px; 
 
    padding-top: 3px; 
 
    padding-bottom: 3px; 
 
} 
 
.square { 
 
    display:inline-block; 
 
    position: relative; 
 
    background-color: #00A0E8; 
 
    padding-left: 18px; 
 
    padding-right: 18px; 
 
    padding-top: 3px; 
 
    padding-bottom: 3px; 
 
}

<div class="h"><span><b>I WANT</b> THIS</span> 
 
</div> 
 

 
<br> 
 
<br> 
 
<div class="h"> 
 
    <div class="square"><b>I GET</b> THIS</div> 
 
</div>

Answer 2

Вы можете использовать атрибут CSS display. Вы можете установить его на: inline или inline-block. Действительно, это то, что <span> делает по умолчанию