CSS Pseudo-Elements

Developer
Stathis Nikolaidis
Size
2,245 Kb
Views
26,312
  1. CSS Pseudo-Elements Previews
  2. CSS Pseudo-Elements HTML Codes
  3. CSS Pseudo-Elements CSS Codes
  4. CSS Pseudo-Elements JS Codes

How do I make an css pseudo-elements?

What is a css pseudo-elements? How do you make a css pseudo-elements? This script and codes were developed by Stathis Nikolaidis on 30 August 2022, Tuesday.

CSS Pseudo-Elements Previews
IQ Test

CSS Pseudo-Elements - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Pseudo-Elements</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>::before / ::after Selectors</h2>
<p class="example1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc enim nisi, posuere a nisl . </p>
<h2>::first-letter Selector</h2>
<p class="example2">In tincidunt vel ipsum non tincidunt. Proin posuere leo non ex posuere, ut auctor ex sodales. </p>
<h2>::first-line Selector</h2>
<p class="example3">Morbi purus augue, pellentesque eu sem in, ullamcorper dapibus velit. Curabitur maximus aliquet tincidunt. Vestibulum auctor suscipit pellentesque. Nam nunc ante, fermentum eu sollicitudin sed, pulvinar non ex. Integer facilisis a nunc ac venenatis. In pellentesque tristique erat, ut ornare erat ultricies in. </p>
<h2>::first-child Selector</h2>
<div class="example4"> <p>Morbi purus augue, pellentesque eu sem in, ullamcorper dapibus velit. Curabitur maximus aliquet tincidunt. </p> <p>Vestibulum auctor suscipit pellentesque. Nam nunc ante, fermentum eu sollicitudin sed, pulvinar non ex. </p> <p>Integer facilisis a nunc ac venenatis. In pellentesque tristique erat, ut ornare erat ultricies in.</p> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p> <p>Curabitur ultrices porttitor massa at imperdiet.</p>
</div> <script src="js/index.js"></script>
</body>
</html>

CSS Pseudo-Elements - Script Codes CSS Codes

body{ font-size:1em; text-align:center; margin:0 auto; max-width:800px;
}
.example1,.example2,.example3,.example4{ width:100%; border-bottom:solid 1px; padding:20px 5px; margin:5px;
}
.example1::before{ content: "before---> "; font-weight:bold; color:blue;
}
.example1::after{ content: "<---after "; font-weight:bold; color:grey;
}
.example2::first-letter{ font-size:200%; border:1px solid green; border-radius:30%; -moz-border-radius:30%;
}
.example3::first-line{ color:red; font-weight:bold; font-size:110%;
}
.example4 p:first-child{ color:blue;
}
.example4 p:last-child{ color:red;
}

CSS Pseudo-Elements - Script Codes JS Codes

/*
Note that you cannot insert HTML (at least, that will be rendered as HTML). content: "<h1>nope</h1>";
*/
CSS Pseudo-Elements - Script Codes
CSS Pseudo-Elements - Script Codes
Home Page Home
Developer Stathis Nikolaidis
Username stathisnikolaidis
Uploaded August 30, 2022
Rating 3
Size 2,245 Kb
Views 26,312
Do you need developer help for CSS Pseudo-Elements?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Stathis Nikolaidis (stathisnikolaidis) Script Codes
Name
CSS3 Change Text Selection Colour
Simple CSS3 Social Icons
Right Sidebar List
CSS Pseudo-Elements
CSS3 8bit Cristiano Ronaldo
Matrix
CSS3 Rounded Corners
CSS3 Simple Moving Background
CSS3 Rising Sun
CSS3 Bottle Lifts Up on Hover
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!