Paano Gumamit Bago at Pagkatapos ng Mga Pseudo na Elemento sa CSS

Paano Gumamit Bago at Pagkatapos ng Mga Pseudo na Elemento sa CSS

Ang mga pseudo-element ay isa sa mga mas advanced na tagapili na magagamit para magamit sa CSS. Ang pangunahing layunin sa likod ng mga tagapiling ito ay upang lumikha ng natatanging estilo, nang hindi binabago ang dokumento ng HTML na ginagamit upang likhain ang pangunahing istraktura ng isang naibigay na webpage.





Narito kung paano gumamit ng mga pseudo-element sa CSS.



mas mabilis ba ang pag-charge ng iyong telepono sa mababang mode ng kuryente

Karaniwang mga elemento ng Pseudo

Mayroong isang malawak na listahan ng mga pseudo-element na magagamit upang gawing mas madali ang buhay ng isang web developer. Ang ilan sa mga pseudo-element na ito ay may kasamang:





  • Dati pa
  • Pagkatapos
  • Backdrop
  • Unang linya
  • Paunang liham

Sa mga tukoy na sitwasyon, ang ilang mga pseudo-element ay magpapatunay na mas naaangkop kaysa sa iba, ngunit ang isang bagay na nananatiling pare-pareho ay ang pangkalahatang istraktura para sa paggamit ng anumang pseudo-element.

Pseudo-elemento Istraktura Halimbawa


selector::pseudo-element{
/* css code */
}

Kahit na maaari mong gamitin ang isang elemento ng HTML bilang isang tagapili, inirerekumenda na gumamit ka ng isang klase o isang id upang maiwasan ang pag-target ng mga hindi nilalayong elemento sa iyong layout. Ang elemento, istilo, o data na nais mong ipasok sa nais na posisyon ay dapat ilagay sa pagitan ng mga kulot na tirante.



Ang bago at pagkatapos ng mga pseudo-element ay ang pinakatanyag sa listahan, at ibinigay na maraming praktikal na paraan upang magamit ang mga ito-hindi mahirap makita kung bakit.

Paggamit ng Bago Pseudo-element sa CSS

Bagaman hindi imposible, mahirap i-overlay ang mga imahe na may nababasa na teksto sa CSS. Karamihan ito ay dahil ang imahe at teksto ay sasakupin ang parehong posisyon sa isang webpage.



Ito ay medyo madali upang magpadala ng isang imahe sa background ng isang pangkat ng teksto , ngunit kapag ang imahe na iyon ay masyadong maliwanag na ito ay may posibilidad na madaig ang teksto na nasa tuktok nito. Sa mga pagkakataong ito, ang susunod na hakbang ay upang subukang gawing mas opaque ang imahe gamit ang pagmamay-ari ng opacity.

Ang tanging problema ay dahil ang imahe at teksto ay sumakop sa parehong posisyon ang teksto ay magiging medyo transparent din.



Ang isa sa ilang mga mabisang paraan upang malutas ang problemang ito ay sa pamamagitan ng paggamit ng bago pseudo-element.

Gamit ang Halimbawa ng Bago Pseudo-element


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Ang code sa itaas ay nilikha upang magamit nang magkakasabay sa klase ng landingPage ng HTML sa ibaba. Tulad ng ipinakita sa code sa itaas, sa pamamagitan ng paggamit ng bago pseudo-element maaari naming ma-target ang imahe at magamit ang opacity property dito bago isama ang imahe sa teksto.





This is the result of using the before pseudo-element
to overlay and image with readable text.


Magreresulta ito sa isang overlay na nakalagay sa imahe at malinaw na ipinapakita ang teksto sa itaas, tulad ng ipinakita sa imahe sa ibaba:

Gamit ang After Pseudo-element sa CSS

Ang isang praktikal na paggamit para sa pagkatapos ng pseudo-element ay upang makatulong sa paglikha ng isang form na HTML. Karamihan sa mga form ay nilikha gamit ang isang hanay ng mga patlang na nangangailangan ng data para sa form na matagumpay na maisumite.

Ang isang paraan upang ipahiwatig na ang isang patlang sa isang form ay nangangailangan ng data ay sa pamamagitan ng paglalagay ng isang asterisk pagkatapos ng label para sa patlang na ito. Ang pagkatapos ng pseudo-element ay nagbibigay ng isang praktikal na paraan para magawa mo ito.

Paggamit ng Halimbawang Pseudo-element na Halimbawa


.required::after{
content: '*';
color: red;
}

Ang pagpasok ng code sa itaas sa seksyon ng CSS ng iyong form ay matiyak na ang bawat label na naglalaman ng kinakailangang klase ay direktang susundan ng isang pulang asterisk. Ang pagkatapos ng pseudo-element ay praktikal din sa halimbawang ito dahil nakakatulong ito na paghiwalayin ang istilo mula sa istraktura (na laging perpekto sa pag-unlad ng software.)

kung paano malalaman kung ang isang larawan ay peke

Ang Pag-aari ng Nilalaman

Tulad ng ipinakita sa halimbawang pagkatapos ng pseudo-element sa itaas, ang pag-aari ng nilalaman ay ang tool na ginagamit upang magsingit ng bagong nilalaman sa isang webpage. Ang accommodation na ito ay ginagamit lamang sa bago at pagkatapos ng mga pseudo-element.

Mahalagang tandaan na kahit na walang magagamit na nilalaman upang mapakain ang pag-aari ng nilalaman (tulad ng sa halimbawa ng hindi pa pseudo-element na halimbawa sa itaas), kinakailangan mo pa ring gamitin ang pag-aari ng nilalaman sa loob ng mga parameter ng bago o pagkatapos pseudo-element upang gumana ang mga ito tulad ng nilalayon.

Ngayon Maaari mong Gumamit ng mga Pseudo-element sa CSS

Sa artikulong ito, natutunan mo kung paano makilala at gumamit ng mga pseudo-element sa iyong mga programa sa CSS. Ipinakilala sa iyo ang bago at pagkatapos ng mga pseudo-element at binigyan ng praktikal na paraan upang magamit ang pareho. Nakita mo rin kung bakit kinakailangan ang pag-aari ng nilalaman para sa matagumpay na paggamit ng bago at pagkatapos ng mga pseudo-element.

Magbahagi Magbahagi Mag-tweet Email 10 Mga Simpleng Halimbawa ng CSS Code na Maaari Mong Malaman sa loob ng 10 Minuto

Kailangan mo ng tulong sa CSS? Subukan ang mga pangunahing halimbawang CSS code upang magsimula, pagkatapos ay ilapat ang mga ito sa iyong sariling mga web page.

Basahin Susunod Mga Kaugnay na Paksa
  • Programming
  • Disenyo ng web
  • CSS
Tungkol sa May-akda Kadeisha Kean(21 Artikulo Nai-publish)

Si Kadeisha Kean ay isang Full-Stack Software Developer at Teknikal / Teknikal na Manunulat. Siya ay may natatanging kakayahan na gawing simple ang ilan sa mga pinaka kumplikadong teknolohikal na konsepto; paggawa ng materyal na maaaring madaling maunawaan ng anumang baguhan sa teknolohiya. Siya ay madamdamin tungkol sa pagsusulat, pagbuo ng mga kagiliw-giliw na software, at paglalakbay sa buong mundo (sa pamamagitan ng mga dokumentaryo).

Higit pa Mula kay Kadeisha Kean

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe