Bits of .NET

🎨 Pseudo Elements = Extra Content

Need extra elements without extra HTML? ::before and ::after add content via CSS.

📝 Pseudo Element Basics

/* Basic usage */
.element::before {
    content: "★";
    color: gold;
    margin-right: 5px;
}

.element::after {
    content: " →";
    color: blue;
}

/* Required: content property */
.element::before {
    content: ""; /* Empty for decoration */
    display: block;
    width: 100%;
    height: 2px;
    background: red;
}

/* Text content */
.quote::before {
    content: "\201C"; /* Left quote */
}
.quote::after {
    content: "\201D"; /* Right quote */
}

/* Counters */
.counter::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}

/* Images with content */
.icon::before {
    content: url('icon.png');
    display: inline-block;
    width: 16px;
    height: 16px;
}

🎯 Practical Examples

/* Tooltip */
.tooltip {
    position: relative;
}
.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
}
.tooltip:hover::after {
    opacity: 1;
}

/* Clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Required field star */
.required label::after {
    content: " *";
    color: red;
}

/* Decorative border */
.heading::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #3498db;
    margin-top: 10px;
}

/* Quote marks */
blockquote::before {
    content: "\201C";
    font-size: 3em;
    color: #ddd;
    position: absolute;
    left: -20px;
    top: -10px;
}

/* List item markers */
li::before {
    content: "▸";
    color: #3498db;
    margin-right: 8px;
}

/* Pseudo Element Tips */
- Content property is required
- Can use attr() for dynamic content
- Great for decorations and icons
- Use with positioning for complex designs
- Display: block for block-level elements

💡 Pseudo Element Tips

• Content property is required
• Can use attr() for dynamic content
• Great for decorations and icons
• Use with positioning for complex designs
• Display: block for block-level elements