бордер по ширине текста

126
27 ноября 2018, 14:50

Есть блок в котором есть текст, если слова перенеслись на новую строку, блок стал меньше, нужно чтоб снизу был бордер по ширине текста

inline-block не подходит так как если слова перенеслись то блок будит считаться по всей ширине и бордер растянется. Так же пробовал внутри вставлять <span> и ему делать бордер но тогда каждая строка будит с бордером.

Не могу сообразить как сделать чтобы бордер был как на 1 картинке?

Answer 1

Оказалось можно, для inline элементов псевдоселектор принимает ширину последнего. 

h2 { 
  font: 28px/30px Arial; 
  text-transform: uppercase; 
  max-width: 20px; 
  display: inline; 
  position: relative; 
} 
 
h2:before { 
  content: ''; 
  display: block; 
  position: absolute; 
  width: 100%; 
  bottom: 0; 
  border-bottom: 1px solid green; 
} 
 
div { padding: 20px; } 
 
.test1 { 
  max-width: 50%; 
} 
 
.test2 { 
  max-width: 60%; 
} 
 
.test3 { 
  max-width: 70%; 
}
<div class="test1"> 
  <h2>Расширенная гарантия Tyres</h2> 
</div> 
<div class="test2"> 
  <h2>Расширенная Tyres гарантия</h2> 
</div> 
<div class="test3"> 
  <h2>Tyres гарантия Расширенная</h2> 
</div>

Не проверял во всех браузерах, но в хроме все отлично

Answer 2

Могу предложить такой вариант:

.asd { 
  display: block; 
  max-width: 100px; 
  word-wrap: break-word; 
  border-bottom: 2px solid green; 
  border-bottom-width: 100%; 
}
<span class="asd">Расширенная гарантия Tyres</span>

Answer 3

section{ 
width:50px; 
margin:0 auto; 
} 
.text{ 
position:relative; 
padding-bottom:2px; 
} 
.text:before{ 
content:''; 
position:absolute; 
border-bottom:1px solid black; 
width:100%; 
bottom:0; 
}
<section> 
<div class="text"> 
Hello world 
</div> 
</section>
При разных размерах ширины блока section линия всегда будет одна.

если нужно тупо для одного слова подчеркивание, то тогда так:

section { 
  width: 50px; 
  margin: 0 auto; 
} 
 
span { 
  position: relative; 
  padding-bottom: 2px; 
  display: inline-block; 
} 
 
span:before { 
  content: ''; 
  position: absolute; 
  border-bottom: 1px solid black; 
  width: 100%; 
  bottom: 0; 
}
<section> 
  <div class="text"> 
    Hello <span>world</span> hello <span>world</span> hello 
  </div> 
</section>

Answer 4

Зачем вам бордер, если для подчеркивания текста есть свойство text-decoration

p { 
  display: block; 
  max-width: 150px; 
  font-weight: bold; 
  text-align: right; 
  text-transform: uppercase; 
} 
 
span { 
  text-decoration: underline; 
  text-decoration-color: green; 
}
<p> 
  Расширенная <span>гарантия Tyres</span> 
</p>

READ ALSO
HTML страницу перенести в Wordpress
HTML

HTML страницу перенести в Wordpress

Всем привет!

 138
Вывод фона за пределы контейнера
HTML

Вывод фона за пределы контейнера

 150
Ограничение ввода в поле input
HTML

Ограничение ввода в поле input

есть input в котором должно быть не больше двух цифр и числа должны быть только от 10 до 30, и запрет ввода буквКак это можно реализовать?

 146
ошибка при работе toLocaleDateString
HTML

ошибка при работе toLocaleDateString

вывод :"2808

 138