Есть блок в котором есть текст, если слова перенеслись на новую строку, блок стал меньше, нужно чтоб снизу был бордер по ширине текста
inline-block не подходит так как если слова перенеслись то блок будит считаться по всей ширине и бордер растянется. Так же пробовал внутри вставлять <span>
и ему делать бордер но тогда каждая строка будит с бордером.
Не могу сообразить как сделать чтобы бордер был как на 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>
Не проверял во всех браузерах, но в хроме все отлично
Могу предложить такой вариант:
.asd {
display: block;
max-width: 100px;
word-wrap: break-word;
border-bottom: 2px solid green;
border-bottom-width: 100%;
}
<span class="asd">Расширенная гарантия Tyres</span>
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 {
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>
Зачем вам бордер, если для подчеркивания текста есть свойство 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>
Виртуальный выделенный сервер (VDS) становится отличным выбором
есть input в котором должно быть не больше двух цифр и числа должны быть только от 10 до 30, и запрет ввода буквКак это можно реализовать?