Létrehozása egy vízszintes vonalat a szöveg mellett a CSS

Hello mindenkinek! A hosszú idő óta nem írtam blogot az első helyen volt „karácsonyi ünnepek”, másrészt az offline munka és egyéb aggályok tettek érződnek. Most kívánom, hogy rögzítse, és írjon a lehető legnagyobb mértékben, egyre több és több elvesztése nélkül a tartalom minősége közzé.

Ma fogok írni, hogyan lehet létrehozni egy vízszintes vonalat a HTML és hogyan helyezze a szöveg mellett a CSS segítségével.

Írásában, azt javasoljuk, hogy két módon lehet megoldani a problémát, az első vonalak, amelyek nem igényelnek, hogy nyúlik a teljes szélességében a blokkot a pszeudo-második és bonyolultabb változata akkor létre kell hozni egy vízszintes vonal teljes szélességét a blokk.

1. lehetőség: CSS pszeudo-elemek (Csak használt CSS 3)

Az alap szerkezete a blokkot, amit kell leadni.

Az alap szerkezete. 1. lehetőség

Egy kis elmélet:
Pszeudo - egy speciális fajtája a CSS tulajdonságokat, amelyek lehetővé teszik, hogy a munka nem az elem is, és annak külön részét.

Szükségünk lesz, mint egy ál: before és: after, hanem a tartalom tulajdonság azt határozza meg a kívánt karaktert, hogy mindkét oldalán a szöveget.

Mi csatolja stílusok, és kap egy pillantást, ne felejtsd el hozzáadni ezeket a stílusokat a téma fájlt (style.css vagy bármi más)

1. lehetőség stílusok

Annak érdekében, hogy a megfelelő elhelyezése a teljes szélességében a sor, akkor használja a háttérképet a háttérben, a kép lehet festeni magát a Photoshop, mint én, vagy talál egy sort az interneten.

Ezután be kell állítani a stílust a tag span, megkérem, fehér alapon (attól függően, hogy a színösszeállítás a helyén), és kérje meg padding (a padding tulajdonság) és összhangba hozzák az egység tetején (az ingatlan -. Top lehet távolítani, ha szükséges)

Továbbá ne felejtsük el, hogy helyezze a képet a szerver és regisztrálja azt a helyes útra (tulajdonság background: url)

Ennek eredményeként, a stílus lesz ez a fajta

Stílusok. 2. lehetőség