Crearea unei linii orizontale de lângă text folosind css

Bună ziua tuturor! O lungă perioadă de timp de când nu am scris un blog, în primul rând, au fost „vacanțe de Crăciun“, și în al doilea rând de a lucra offline și alte preocupări și-au făcut simțit. Acum am de gând să-l stabilească și să scrie cât mai mult posibil, mai mult și mai mult, fără a pierde calitatea conținutului publicat.

Astăzi voi scrie despre cum să creați o linie orizontală folosind HTML și cum să-l plaseze lângă text folosind CSS.

În articolul său, vă sugerez două moduri de a rezolva problema, prima pentru liniile care nu au nevoie să se întindă pe întreaga lățime a blocului folosind pseudo-a doua și mai versiune complexă, va trebui să creați o linie orizontală pe întreaga lățime a blocului.

Opțiunea 1: Folosind CSS pseudo-elemente (utilizate numai în CSS 3)

Structura de bază a blocului pe care vom fi aruncat.

Structura de bază. opţiunea 1

Un pic de teorie:
Pseudo - este un tip special de proprietăți CSS care vă permit să lucrați nu pe elementul în sine, iar pe partea sa separată.

Vom avea nevoie, cum ar fi un pseudo: înainte și: după, ci de proprietatea de conținut definim caracterul dorit să fie pe ambele părți ale textului nostru.

Anexăm stiluri și a obține un aspect, nu uitați să adăugați aceste stiluri la fișierul temă (style.css sau orice altceva)

Opțiunea 1. Stiluri

Pentru a obține plasarea corectă a întreaga lățime a liniei, vom folosi imaginea de fundal ca un fundal, o imagine poate te picta în Photoshop așa cum am făcut-o, sau a găsi o linie de pe Internet.

În continuare avem nevoie pentru a seta stilul de durata nostru tag-ul, întrebați-l un fundal alb (în funcție de schema de culori a site-ului dvs.) și să-l întreb padding (proprietatea padding) și aliniată cu partea de sus a unității (proprietate -. Top pot fi eliminate dacă nu este necesar)

De asemenea, nu uitați să plasați imaginea pe serverul dvs. și înregistrați-l la calea cea dreaptă (fond de proprietate: URL)

Ca rezultat, stilurile noastre vor primi acest tip de

Stiluri. opţiunea 2