Как сделать такой эффект?

Question

[Jiakki-js]

Как сделать такой эффект , при адаптивной верстке? (линия)
верстка на бутстрепе
Зарание спасибо

Comments

[Алексей Уколов]

Какой "такой" эффект?

[Jiakki-js]

Алексей Уколов: (линия)

Answer 1

[Александр]

Например, банально:

<style type="text/css">
.invisible-red-line {
    border-bottom: 5px solid red;
}

.white-text-on-red-bg {
    background-color: red;
    color: white;
}
</style>

<div class="invisible-red-line">
    <span class="white-text-on-red-bg">Отзывы о нас</span>
</div>

Comments

[Jiakki-js]

если в .container, то линия не будет доставать до правого края , а ясли без , то будет на всю ширину

[Jiakki-js]

а нужно , до 'отзывы' линии нет , а после есть

[Александр]

Jiakki-js: это уже играть с маржинами и паддингами.

[Jiakki-js]

Александр: вот уже час граюсь , никак наиграться не могу

[Александр]

Jiakki-js: https://jsfiddle.net/uxrehrvc/

[Jiakki-js]

Александр: дело в том , что эти 20% в разных размерах экрана , будут разние

[Jiakki-js]

Александр: а нужно адаптивно

[Александр]

Jiakki-js: Это уже вопрос правильной верстки. :)

Answer 2

[Роман]

а если так:
- для боди задать оверфлоу-х
- к блоку текста "Отзывы" добавить относительную позицию и псевдоэлемент афтер
- которому установить огромную ширину.