Pseudo-element
Örnek
<style>
input {
border:none;
outline:none;
border-bottom:2px solid grey;
}
input::placeholder {
color: grey;
opacity: 0.5;
}
input:focus::placeholder{
color:gold;
opacity:1;
}
input:focus {
border-bottom-color:green;
}
</style>
</head>
<body>
<input type="text" name="fname" placeholder="Type your first name here..">
<br><br><br>
<input type="text" name="fname" placeholder="Type your first name here..">
Örnek
<style>
::selection {
color: white;
background: blue;
}
</style>
</head>
<body>
<h2>Select some text on this page</h2>
Örnek
<style>
p::first-letter {
font-size: 200%;
font-weight: bold;
color: #8A2BE2;
}
</style>
</head>
<body>
<h1>Demo of ::first-letter</h1>
<p>My name is Donald.</p>
<p>My best friend is Mickey.</p>
<p>We live in Duckburg.</p>
Örnek
<style>
::selection {
color: white;
background: blue;
}
p::after {
content: "↓";
}
/*hem puseduo class hem puseduo element */
p:not(p.iki)::before {
content: "?";
}
p {display:inline-block}
p.iki::first-letter {
font-size: 200%;
font-weight: bold;
color: #8A2BE2;
}
</style>
</head>
<body>
<h1>Demo of ::before</h1>
<p>Menü1</p>
<p>Menü2</p>
<p>Menü3</p>
<p>Menü4</p>
<br>
<p class="iki">My name is Donald.</p>
<p class="iki">My best friend is Mickey.</p>
<p class="iki">We live in Duckburg.</p>
