Belajar CSS (21. peseudo-element)

Akhi Syabab

Diskripsi : digunakan untuk mengatur bagian tertentu dari suatu elemen.
peseudo-element yang digunakan yaitu ::after, ::before, ::first-letter, ::first-line, ::selection
Syntax

selector::peseudo-elemet{
	property:value;
}

::after
ex.

<!DOCTYPE html>
<html>
<head>
	<style>
		p::after { 
		    content: " - Remember this";
		}
	</style>
</head>
<body>

	<p>My name is Donald</p>
	<p>I live in Ducksburg</p>

	<p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:after instead of ::after).</p>

</body>
</html>

hasil

::before
ex.

<!DOCTYPE html>
<html>
<head>
	<style>
		p::before {
		    content: "Read this -";
		}
	</style>
</head>
<body>

	<p>My name is Donald</p>
	<p>I live in Ducksburg</p>

	<p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:before instead of ::before).</p>

</body>
</html>

hasil

::first-letter
properti yang digunakan yaitu

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if float is ‘none’)
text-transform
line-height
float
clear
ex.

<!DOCTYPE html>
<html>
<head>
	<style>
		p::first-letter {
		    font-size: 200%;
		    color: #8A2BE2;
		}
	</style>
</head>
<body>

	<h1>Welcome to My Homepage</h1>

	<p>My name is Donald.</p>
	<p>I live in Duckburg.</p>
	<p>My best friend is Mickey.</p>

	<p><b>Note:</b> For this selector to work in IE 5.5-8, you must specify the old, single-colon CSS2 syntax (:first-letter instead of ::first-letter).</p>

</body>
</html>

hasil

::first-line
properti yang digunakan

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
ex.

<!DOCTYPE html>
<html>
<head>
	<style>
		p::first-line {
		    background-color: yellow;
		}
	</style>
</head>
<body>

	<h1>WWF's Mission Statement</h1>
	<p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>

	<p><b>Note:</b> For this selector to work in IE 5.5-8, you must specify the old, single-colon CSS2 syntax (:first-line instead of ::first-line).</p>

</body>
</html>

hasil

::selection
ex.

<!DOCTYPE html>
<html>
<head>
	<style>
		::-moz-selection { /* Code for Firefox */
		    color: red;
		    background: yellow;
		}

		::selection {
		    color: red;
		    background: yellow;
		}
	</style>
</head>
<body>

	<h1>Select some text on this page:</h1>

	<p>This is a paragraph.</p>
	<div>This is some text in a div element.</div>

	<p><strong>Note:</strong> ::selection is not supported in Internet Explorer 8 and earlier versions.</p>
	<p><strong>Note:</strong> Firefox supports an alternative, the ::-moz-selection property.</p>

</body>
</html>

hasil

Semoga Bermanfaat.