pseudo-element ត្រូវគេយកទៅប្រើប្រាស់សំរាប់រចនាផ្នែកផ្សេងៗរបស់ element មានដូចជាតួអក្សរទីមួយ ឬបន្ទាត់ទីមួយ បន្ថែម content នៅខាងមុខនិងឬខាងក្រោយ element ជាដើម។
::first-line pseudo-element ត្រូគេប្រើប្រាស់សំរាប់រចនាកែច្នៃបន្ទាត់ទីមួយរបស់អត្ថបទមាននៅក្នុង element ទាំងឡាយ។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Pseudo-element</title>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.
</body>
</html>
You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.
::first-letter ត្រូវគេយកទៅប្រើប្រាស់សំរាប់កែច្នៃរចនាតួអក្សរទីមួយនៃអត្ថបទមាននៅក្នុង element ទាំងឡាយ។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Pseudo-element</title>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>
You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!
</body>
</html>
You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!
::before ត្រូវគេយកទៅប្រើប្រាស់សំរាប់បន្ថែម content នៅពីមុខ content របស់ element ទាំងឡាយ។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Pseudo-element</title>
<style>
h1::before {
content: url(smiley.gif);
}
</style>
</head>
<body>
This is a heading
The ::before pseudo-element inserts content before the content of an element.
This is a heading
Note: IE8 supports the content property only if a !DOCTYPE is specified.
</body>
</html>
This is a heading
The ::before pseudo-element inserts content before the content of an element.
This is a heading
Note: IE8 supports the content property only if a !DOCTYPE is specified.
::after ត្រូវគេយកទៅប្រើប្រាស់សំរាប់បន្ថែម content នៅខាងក្រោយ element ទាំងឡាយ។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Pseudo-element</title>
<style>
h1::after {
content: url(smiley.gif);
}
</style>
</head>
<body>
This is a heading
The ::after pseudo-element inserts content after the content of an element.
This is a heading
Note: IE8 supports the content property only if a !DOCTYPE is specified.
</body>
</html>
This is a heading
The ::after pseudo-element inserts content after the content of an element.
This is a heading
Note: IE8 supports the content property only if a !DOCTYPE is specified.
::selection ត្រូវគេយកទៅប្រើប្រាស់សំរាប់ធ្វើការកែច្នៃរចនាផ្នែកនៃអត្ថបទដែលត្រូវបានជ្រើសរើស។
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Pseudo-element</title>
<style>
::-moz-selection { /* Code for Firefox */
color: red;
background: yellow;
}
::selection {
color: red;
background: yellow;
}
</style>
</head>
<body>
Select some text on this page:
This is a paragraph.
This is some text in a div element.
Note: ::selection is not supported in Internet Explorer 8 and earlier versions.
Note: Firefox supports an alternative, the ::-moz-selection property.
</body>
</html>
Select some text on this page:
This is a paragraph.
Note: ::selection is not supported in Internet Explorer 8 and earlier versions.
Note: Firefox supports an alternative, the ::-moz-selection property.
ក្រៅពីការបន្ថែម content នៅពីខាងមុខ ឬខាងក្រោយ element ទាំងឡាយ យើងក៏អាចធ្វើការកែច្នៃរចនា content ដែលត្រូវបានបន្ថែមនោះបានដែរ ដោយធ្វើដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Pseudo-element</title>
<style>
h1::after {
content: url(smiley.gif);
position: relative;
top: 15px;
}
</style>
</head>
<body>
This is a heading
The ::after pseudo-element inserts content after the content of an element.
This is a heading
Note: IE8 supports the content property only if a !DOCTYPE is specified.
</body>
</html>
This is a heading
The ::after pseudo-element inserts content after the content of an element.
This is a heading
Note: IE8 supports the content property only if a !DOCTYPE is specified.
