Създаване на хоризонтална линия в непосредствена близост до текст чрез CSS

Здравейте на всички! А дълго време, тъй като аз не съм написал в блога на първо място, са били "Коледните празници", и второ да се работи офлайн и други въпроси са се представили се чувствах. Сега имам намерение да го оправя и пишат колкото е възможно повече, все повече и повече, без да губи от качеството на съдържанието, публикувано.

Днес аз ще пиша за това как да се създаде хоризонтална линия с помощта на HTML и как да го поставите в непосредствена близост до текста с помощта на CSS.

В статията си, аз ви предлагам два начина за решаване на проблема, като първият за линии, които не трябва да се простират по цялата широчина на блока, като се използва псевдо-втората и по-сложна версия, която ще трябва да се създаде хоризонтална линия по цялата широчина на блока.

Вариант 1: Използване на CSS псевдо-елементи (използва се само в CSS 3)

Основната структура на блока, на която ще бъде хвърлен.

Основната структура. вариант 1

Малко теория:
Псевдо - е специален вид на CSS свойства, които ви позволяват да не работят на самия елемент, а на отделни част.

Ние ще трябва като псевдо: преди и: след това, а от имота съдържание ние определяме желаният символ да бъде от двете страни на нашия текст.

Ние добавяне стилове и да погледнете, не забравяйте да добавите тези стилове, за да си тема файл (style.css или каквото)

Вариант 1. Стилове

За да се постигне правилното поставяне на цялата ширина на линията, ние ще използваме фоновото изображение като фон, на снимка може да се боя в Photoshop, както направих аз, или да намерят онлайн в интернет.

След това трябва да зададете стил за маркера ни педя, го попитам бял фон (в зависимост от цветовата схема на сайта си) и да го помоли подложка (на подложките имота) и в съответствие с горната част на устройството (на имота -. Топ могат да бъдат отстранени, ако не е необходимо)

Също така, не забравяйте да поставите изображението на вашия сървър и да го регистрирате по правия път (фон имот: URL)

В резултат на това нашите стилове ще получат този вид

Стилове. вариант 2