Pseudo-elements allow you to style specific parts of an element or insert content without changing the HTML. The most commonly used pseudo-elements are ::before and ::after.<\/p>\n\n\n\n
::before inserts content before the actual content of an element.
::after inserts content after the actual content of an element.<\/p>\n\n\n\n
These are useful for adding decorative elements, icons, labels, or effects without extra HTML tags.<\/p>\n\n\n\n
selector::before {
content: “Text or empty”;
}<\/p>\n\n\n\n
selector::after {
content: “Text or empty”;
}<\/p>\n\n\n\n
The content property is required. Without it, the pseudo-element will not appear.<\/p>\n\n\n\n
p::before {
content: “Note: “;
color: red;
}<\/p>\n\n\n\n
This will automatically add the word “Note:” before every paragraph.<\/p>\n\n\n\n
h2::after {
content: “”;
display: block;
width: 50px;
height: 3px;
background-color: black;
}<\/p>\n\n\n\n
This creates a line below each heading without adding extra HTML.<\/p>\n\n\n\n
button::after {
content: ” \u2192”;
}<\/p>\n\n\n\n
button:hover::after {
color: blue;
}<\/p>\n\n\n\n
This adds an arrow after the button text and changes color on hover.<\/p>\n\n\n\n
li::before {
content: “\u2714 “;
color: green;
}<\/p>\n\n\n\n
This adds a check icon before each list item.<\/p>\n\n\n\n
You can position pseudo-elements using CSS positioning.<\/p>\n\n\n\n
div {
position: relative;
}<\/p>\n\n\n\n
div::before {
content: “”;
position: absolute;
top: 0;
left: 0;
}<\/p>\n\n\n\n
This allows you to place elements exactly where needed.<\/p>\n\n\n\n
Pseudo-elements do not work on all HTML elements such as input fields.
They are mainly used for styling and decoration, not important content.
Always use content property even if it is empty.
They help keep HTML clean and reduce extra tags.<\/p>\n\n\n\n
Create a card design where
A label appears before the title using ::before
A decorative line appears after the title using ::after<\/p>\n\n\n\n
<\/p>\n","protected":false},"menu_order":0,"template":"","class_list":["post-159","lesson","type-lesson","status-publish","hentry"],"yoast_head":"\n