CSS előtt és CSS után - a Tartalom tulajdonságának használata

Programozás

A contentCSS tulajdonság meghatározza az elem tartalmát. Lehet, hogy hallotta, hogy ez a tulajdonság csak a ::beforeés az ::afterálelemekre vonatkozik . Ebben a cikkben megvizsgáljuk az contentingatlan különböző felhasználási eseteit , beleértve az álelemeken kívüli eseteket is .

Előfeltétel

Mivel az contentingatlan használati eseteinek többsége álelemeket tartalmaz, javasoljuk, hogy ismerje meg az ::beforeés ::afterálelemek működését. Íme egy nagyszerű cikk, amely felgyorsítja Önt:

  • CSS álelemek - A választók előtt és után megmagyarázva

Elfogadott értékek

Először vessünk egy pillantást az contentingatlan összes elfogadott értékére .

  • normal: Ez az alapértelmezett érték. Számolja, hogy noneha használt pseudo-elemekkel.
  • none: Pszeudo-elem nem jön létre.
  • : A tartalmat a megadott karakterláncra állítja. Ez a karakterlánc tartalmazhat Unicode menekülési szekvenciákat. Például a copyright szimbólum: \\000A9.
  • : Beállítja a tartalmat egy kép vagy gradiens használatával url(), vagy linear-gradient().
  • open-quote| close-quote: A tartalmat a tulajdonságból hivatkozott megfelelő idézőjelre állítja quotes.
  • no-open-quote| no-close-quote: Eltávolít egy idézetet a kijelölt elemből, de még mindig növeli vagy csökkenti a quotestulajdonságból hivatkozott fészkelési szintet .
  • attr(*attribute*): Beállítja a tartalmat a kijelölt elemek kiválasztott attribútumának karakterlánc-értékeként.
  • counter(): A tartalmat a counter, általában egy szám értékeként állítja be .

Húr

Az egyik legalapvetőbb példa a karakterlánc- tartalom hozzáadása az elem előtt vagy után. Ebben a példában hozzáadunk egy link szimbólumot egy link elé, majd hozzáadjuk a link URL-jét utána.

a::before { content: "\\1F517 "; } a::after { content: " (" attr(href) ")"; }

Figyelje meg az ::beforeál-elem Unicode karaktere és az ál-elem első zárójel előtti helyet ::after. Ez teret fog teremteni ezek és a szülő elem között.

Alternatív megoldásként felveheti paddingvagy marginaz ál-elemeket az elválasztás hozzáadásához.

Alapvető idézetek

A contenttulajdonsággal idézőjeleket adhat az elemek elé és / vagy után. Most a HTML-ben megvan a címke. Ez idézőjeleket is ad hozzá a tartalma körül. Az contentingatlan segítségével azonban jobban ellenőrizhetjük a megvalósítást.

Íme az idézetek hozzáadásának legalapvetőbb példája:

Ezt megteheti a HTML-címke használatával is . De talán másképp szeretnénk megformálni az idézetet. Tehát csak a kezdő idézetet tegyük hozzá, a befejező idézetet ne. És alakítsuk ki a nyitó idézetet is.

p { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba(0, 0, 0, 0.5) }

Az eredmény:

Kép, amely egy stílusos idézetet mutat a bekezdés bal felső sarkában

Advanced Quotes

Azt is megadhatjuk, hogy hova nem akarunk idézeteket. Például idézhet valakit, aki más személyt idéz. Tehát árajánlatok lennének idézőjeleken belül, amelyek zavaróvá válhatnak az olvasóban.

Az alábbi CodePen-ben HTML címkéket használunk , majd meghatározzuk, hogy mely címkék ne jelenítsék meg az idézőjeleket.

Első pillantásra azt gondolhatja, hogy csak szükség esetén távolítsuk el a címkét. De annak megadásával, hogy egy árajánlat hol nem lehet, még növeli vagy csökkenti a quotestulajdonságból hivatkozott fészkelési szintet .

Ennek magyarázatához meg kell értenünk a quotestulajdont. Ez egyszerűen egy "tömb" karakter, amelyet fel kell használni az idézés során. Íme egy példa:

q { quotes: '“' '”' '‘' '’' '“' '”'; }

Ezek idézőjelek. Az első készlet az árajánlatok legfelső szintjére szolgál. A második készletet használjuk az első beágyazott idézethez. És a harmadik készletet használjuk a második beágyazott idézethez. És így tovább, ha több készlet is szerepelne benne.

Most, hogy megértettük a quotestulajdonságot, meg tudom magyarázni a no-open-quoteés no-close-quotetulajdonságainak működését.

Az árajánlatok minden szintjéhez különböző karakterkészleteket rendelhetünk az idézetekhez. Annak megadásával, hogy egy idézet hol nem lehet, még növeli vagy csökkenti a quotestulajdonságból hivatkozott fészkelési szintet .

Vessen egy pillantást az alábbi példára. Látni fogja, hogy az idézetek második szintje kihagyásra kerül.

Attribútumok

Az attribútumok felhasználhatók arra, hogy tartalmat továbbítsanak HTML-ből a CSS contenttulajdonságba. Ezt valójában már a hivatkozási példában használtuk, ahol az hrefattribútummal az URL karakterláncot tartalmunk részeként vettük fel .

Tökéletes használati eset ehhez egy tipp. Hozzáadhat egy titleattribútumot egy elemhez a HTML-ben, hogy egy egyszerű, beépített eszköztipp legyen az egérrel. De ennek testreszabásához használhatunk HTML-címkénkben contentegy adatattribútumot, majd a tulajdonság segítségével hozzáadhatunk egy tippet.

Ebben a példában data-tooltipa HTML elemünk attribútumát használjuk az érték átadásához az eszköztippben. A mutató a tooltip, mi meg a contenthogy "", mivel contentszükség van arra, hogy egy ::beforevagy ::afterpseudo-elem.

Pultok

A counter()CSS függvény egy karakterláncot ad vissza, amely a megnevezett számláló aktuális értékét képviseli. A következő példában van egy rendezett lista, amelyhez hozzáadunk tartalmat az a használatával counter.


    
    ol { counter-reset: exampleCounter; } li { counter-increment: exampleCounter; } li::after { content: "[" counter(exampleCounter) "] == [" counter(exampleCounter, upper-roman) "]"; }

    Anélkül, hogy túlságosan elmélyülnénk a counterfüggvényben, először el kell indítanunk a számlálót az olelemen. Nevezhetjük ezt, amit csak szeretnénk. Ezután megadjuk a számlálónak az egyes lielemek növekményét . És végül beállítottuk contenta li::after.

    Itt az eredmény:

    Rendezett lista

    Ezzel testreszabhatja az egyes listaelemek tartalmát, amelyeknek megfelelő számra van szükségük. Vagy használhatja ezt a listaelem testreszabására. Például eltávolíthatja az alapértelmezett számozást, és megvalósíthat egy egyedi stílusú számozási rendszert.

    Képek

    Képek és színátmenetek használhatók a contenttulajdonsággal. Ez meglehetősen egyértelmű. Itt van egy példa, amely mindkettőt használja:

    Az akadálymentesség érdekében lehetőség van alternatív szöveg hozzáadására is a képhez. Ez a funkció azonban nem teljesen támogatott.

    content: url(//unsplash.it/200/200) / "Alternative Text Here";
    Megjegyzés: Ezt a Firefox, az IE és a Safari nem támogatja. Továbbá a színátmenet nem működik a Firefoxban.

    Az álelemeken kívül

    Úgy van! Használhatja a contenttulajdon kívül a pszeudo-elemek ::beforeés ::after. Bár használata korlátozott, és nem teljesen kompatibilis az összes böngészőben.

    A legegyszerűbb felhasználási eset egy elem cseréje lenne.

     codeSTACKr 
    #replace { content: url(""); width: 100%; }
    Megjegyzés: A cserét az IE nem támogatja.

    Következtetés

    Legtöbbször content: ""az ::beforeés ::afterálelemekben találhatók. De az contentingatlan számos hasznos alkalmazással rendelkezik.

    Véleményem szerint a legjobb felhasználás tömeges elemek frissítésére. Ha ikont szeretne hozzáadni a webhely minden linkje előtt, sokkal könnyebb lenne hozzáadni a contenttulajdonságon keresztül, mint hozzáadni a HTML dokumentum minden eleméhez.

    Köszönöm, hogy elolvasta!

    Köszönjük, hogy elolvasta ezt a cikket. Remélhetőleg ez segített jobban megérteni, hogyan contentműködik az ingatlan a CSS-ben.

    Jesse Hall (codeSTACKr)Jesse vagyok Texasból. Nézze meg a többi tartalmat, és tudassa velem, hogyan segíthetek Önnek abban, hogy webfejlesztővé váljon.

    • Feliratkozás a YouTube-ra
    • Köszönj! Instagram | Twitter
    • Iratkozzon fel a hírlevelemre