ป้ายกำกับ: Pseudo elements คือ

Lv.16 CSS Pseudo elements

Posted on by alsoon

CSS Pseudo-elements เป็นการเลือกอิลิเมนต์ที่ไม่สามารถอ้างอิงจาก DOM ได้

CSS ::first-line Pseudo-element

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

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Pseudo-element</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p::first-line {
				color: red;
			}
		</style>
	</head>
	<body>
	
		<p>พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ พารากราฟ </p>

	</body>
</html>

CSS ::first-letter Pseudo-element

เป็นการเลือกตัวอักษรตัวแรกของข้อความ

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Pseudo-element</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p::first-letter {
				color: red;
				font-size: 36px;
			}
		</style>
	</head>
	<body>
	
		<p>พารากราฟ</p>

	</body>
</html>

CSS ::before Pseudo-element

เป็นการเพิ่มอะไรบางอย่างที่ต้องการก่อนอิลิเมนต์

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Pseudo-element</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p::before {
				content: "nkaub.com";
				background-color: blue;
				color: red;
				font-weight: bold;
				padding: 10px;
			}
		</style>
	</head>
	<body>
	
		<p>พารากราฟ</p>

	</body>
</html>

CSS ::after Pseudo-element

เป็นการเพิ่มอะไรบางอย่างที่ต้องการหลังอิลิเมนต์ ตรงกันข้ามกับ ::before

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | CSS Pseudo-element</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		
		<style>
			p::after {
				content: "nkaub.com";
				background-color: blue;
				color: red;
				font-weight: bold;
				padding: 10px;
			}
		</style>
	</head>
	<body>
	
		<p>พารากราฟ</p>

	</body>
</html>
Top