วิธีใช้ก่อนและหลัง Pseudo Elements ใน CSS

วิธีใช้ก่อนและหลัง Pseudo Elements ใน CSS

องค์ประกอบหลอกเป็นหนึ่งในตัวเลือกขั้นสูงที่พร้อมใช้งานใน CSS จุดประสงค์หลักที่อยู่เบื้องหลังตัวเลือกเหล่านี้คือการสร้างสไตล์ที่เป็นเอกลักษณ์ โดยไม่ต้องแก้ไขเอกสาร HTML ที่ใช้สร้างโครงสร้างพื้นฐานของหน้าเว็บที่กำหนด





ต่อไปนี้คือวิธีใช้องค์ประกอบหลอกใน CSS



หนังใหม่ฟรีออนไลน์โดยไม่ต้องดาวน์โหลดหรือสมัคร

องค์ประกอบหลอกทั่วไป

มีรายการองค์ประกอบหลอกมากมายที่ช่วยให้ชีวิตของนักพัฒนาเว็บง่ายขึ้น องค์ประกอบหลอกบางส่วนเหล่านี้รวมถึง:





  • ก่อน
  • หลังจาก
  • ฉากหลัง
  • เส้นแรก
  • จดหมายฉบับแรก

ในสถานการณ์เฉพาะ องค์ประกอบหลอกบางอย่างจะพิสูจน์ได้ว่าเหมาะสมกว่าองค์ประกอบอื่น แต่สิ่งหนึ่งที่ยังคงที่คือโครงสร้างทั่วไปสำหรับการใช้องค์ประกอบหลอกใดๆ

ตัวอย่างโครงสร้างองค์ประกอบหลอก


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

แม้ว่าคุณสามารถใช้องค์ประกอบ HTML เป็นตัวเลือก ขอแนะนำให้คุณใช้คลาสหรือรหัสเพื่อหลีกเลี่ยงการกำหนดเป้าหมายองค์ประกอบที่ไม่ได้ตั้งใจในการจัดวางของคุณ องค์ประกอบ ลักษณะ หรือข้อมูลที่คุณต้องการแทรกในตำแหน่งที่ต้องการควรวางไว้ระหว่างวงเล็บปีกกา



องค์ประกอบหลอกก่อนและหลังเป็นที่นิยมมากที่สุดในรายการ และเนื่องจากมีวิธีการใช้งานจริงมากมาย จึงไม่ยากที่จะเข้าใจว่าทำไม

การใช้ Before Pseudo-element ใน CSS

แม้ว่าจะไม่เป็นไปไม่ได้ แต่ก็เป็นการยากที่จะวางภาพซ้อนทับด้วยข้อความที่อ่านได้ใน CSS สาเหตุส่วนใหญ่เป็นเพราะรูปภาพและข้อความจะอยู่ตำแหน่งเดียวกันบนหน้าเว็บ



มันค่อนข้างง่ายที่จะ ส่งรูปภาพไปยังพื้นหลังของกลุ่มข้อความ แต่เมื่อภาพนั้นสว่างเกินไป ก็มีแนวโน้มที่จะครอบงำข้อความที่อยู่ด้านบน ในกรณีเหล่านี้ ขั้นตอนต่อไปคือการพยายามทำให้ภาพมีความทึบน้อยลงโดยใช้คุณสมบัติความทึบ

ปัญหาเดียวคือเนื่องจากรูปภาพและข้อความอยู่ในตำแหน่งเดียวกัน ข้อความจึงค่อนข้างโปร่งใส



วิธีที่มีประสิทธิภาพไม่กี่วิธีในการแก้ปัญหานี้คือการใช้ before 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%;
}

โค้ดด้านบนนี้สร้างขึ้นเพื่อใช้พร้อมกับคลาส LandingPage ของ HTML ด้านล่าง ดังที่แสดงในโค้ดด้านบน โดยการใช้ before pseudo-element เราสามารถกำหนดเป้าหมายรูปภาพและใช้คุณสมบัติ opacity ก่อนที่รูปภาพจะรวมเข้ากับข้อความ





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


ซึ่งจะส่งผลให้มีการวางซ้อนทับบนรูปภาพและข้อความที่ชัดเจนแสดงอยู่ด้านบน ดังที่แสดงในภาพด้านล่าง:

การใช้ After Pseudo-element ใน CSS

การใช้งานจริงสำหรับ after pseudo-element คือการช่วยในการสร้างแบบฟอร์ม HTML แบบฟอร์มส่วนใหญ่สร้างด้วยชุดของฟิลด์ที่ต้องการข้อมูลสำหรับการส่งแบบฟอร์มให้สำเร็จ

วิธีหนึ่งในการระบุว่าฟิลด์ในแบบฟอร์มต้องการข้อมูลคือโดยการวางเครื่องหมายดอกจันหลังป้ายชื่อสำหรับฟิลด์นี้ After pseudo-element เป็นวิธีที่ใช้ได้จริงสำหรับคุณในการทำเช่นนี้

การใช้ตัวอย่างหลังองค์ประกอบหลอก


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

การแทรกโค้ดด้านบนลงในส่วน CSS ของแบบฟอร์มจะช่วยให้มั่นใจได้ว่าป้ายกำกับทุกป้ายที่มีคลาสที่ต้องการจะตามด้วยเครื่องหมายดอกจันสีแดงโดยตรง องค์ประกอบหลังเทียมยังใช้งานได้จริงในตัวอย่างนี้ เนื่องจากช่วยแยกสไตล์ออกจากโครงสร้าง (ซึ่งเหมาะสำหรับการพัฒนาซอฟต์แวร์เสมอ)

วิธีเปลี่ยนชื่อโซเชียลคลับ

ทรัพย์สินเนื้อหา

ดังที่แสดงในตัวอย่างหลังองค์ประกอบหลอกด้านบน คุณสมบัติเนื้อหาเป็นเครื่องมือที่ใช้ในการแทรกเนื้อหาใหม่ลงในหน้าเว็บ คุณสมบัตินี้ใช้กับองค์ประกอบเทียมก่อนและหลังเท่านั้น

สิ่งสำคัญที่ควรทราบคือ แม้ว่าจะไม่มีเนื้อหาให้ฟีดไปยังคุณสมบัติเนื้อหา (เช่นในตัวอย่างองค์ประกอบหลอกก่อนหน้าด้านบน) คุณยังคงต้องใช้คุณสมบัติเนื้อหาภายในพารามิเตอร์ของก่อนหรือหลัง องค์ประกอบหลอกเพื่อให้พวกเขาทำงานได้ตามที่ตั้งใจไว้

ตอนนี้คุณสามารถใช้องค์ประกอบหลอกใน CSS

ในบทความนี้ คุณได้เรียนรู้วิธีระบุและใช้องค์ประกอบเทียมในโปรแกรม CSS ของคุณ คุณได้รับการแนะนำให้รู้จักกับองค์ประกอบหลอกก่อนและหลังและได้รับวิธีปฏิบัติในการใช้ทั้งสองอย่าง คุณยังดูได้ว่าทำไมคุณสมบัติเนื้อหาจึงจำเป็นสำหรับการใช้องค์ประกอบเทียมก่อนและหลังสำเร็จ

แบ่งปัน แบ่งปัน ทวีต อีเมล 10 ตัวอย่างโค้ด CSS อย่างง่ายที่คุณเรียนรู้ได้ใน 10 นาที

ต้องการความช่วยเหลือเกี่ยวกับ CSS หรือไม่ ลองใช้ตัวอย่างโค้ด CSS พื้นฐานเหล่านี้เพื่อเริ่มต้น จากนั้นนำไปใช้กับหน้าเว็บของคุณเอง

อ่านต่อไป หัวข้อที่เกี่ยวข้อง
  • การเขียนโปรแกรม
  • ออกแบบเว็บ
  • CSS
เกี่ยวกับผู้เขียน คาเดชา คีน(21 บทความที่ตีพิมพ์)

Kadeisha Kean เป็นนักพัฒนาซอฟต์แวร์ฟูลสแตกและนักเขียนด้านเทคนิค/เทคโนโลยี เธอมีความสามารถที่ชัดเจนในการทำให้แนวคิดทางเทคโนโลยีที่ซับซ้อนที่สุดบางส่วนง่ายขึ้น การผลิตวัสดุที่สามารถเข้าใจได้ง่ายโดยสามเณรเทคโนโลยี เธอหลงใหลในการเขียน พัฒนาซอฟต์แวร์ที่น่าสนใจ และเดินทางไปทั่วโลก (ผ่านสารคดี)

เพิ่มเติมจาก Kadeisha Kean

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก