Pseudo Elements

• Pseudo Element represents an actual part of the DOM

Code for styling first letter of a sentence

<p>
	<span class="big-letter">F</span>ind the goods.
</p>

<p>
	<span class="big-letter">W</span>hat are you doing.
</p>

<style>
	.big-letter {
		font-size: 5rem
	}
</style>

When using Pseudo Elements we can do this

• The ::first-letter part is the pseudo element

<p>
	Find the good
</p>

<p>
	What you're thinking is what you're becoming
</p>

<style>
	p::first-letter{
		font-size: 5rem
	}
</style>

::BEFORE & ::AFTER

• Using ::before and ::after, we can style HTML more easily

<div class="hello">
	::before
	I have learned over the years that....
	::after
</div>

<style>
	.hello::before, .hello::after{
		content: ""; //This creats an empty space before/after the div
		width: 100%;
		height: 10px;
		display: inline-block;
		background: red;
	}
</style>

• This code would create two red blocks, before and after the div section
• This could be used, for example, in adding emojis in front of a list

More Elements (Depends on browsers)

• ::Selection
  • Allows to modify the style when selecting the text
• ::-webkit-scrollbar
  • Allows modifying the scrollbar