آموزش after: و before: در css

در css یک سری شبه عنصر یا عنصر کاذب (pseudo-element) وجود دارد. مانند:

first-letter:

first-line:

after:

before:

after: و before: امکان اضافه کردن یک متن یا محتوا را به ابتدا یا انتهای یک عنصر فراهم می کنند. این کار توسط خاصیت content صورت می پذیرد.

after: اجازه می دهد متن یا محتوایی به بعد از یک عنصر اضافه شود.

before: اجازه می دهد متن یا محتوایی به قبل از یک عنصر اضافه شود.

به عنوان مثال:

.tip::before{
    content: "Hi";
    font-size: 50px;
    color: red;
}
.tip::after{
    content: "Bye";
    font-size: 50px;
    color: red;
}

.tip-1::before{
    content: '';
    background: green;
    height: 10px;
    display: block;
    margin: 10px;
}
.tip-1::after{
    content: '';
    background: green;
    width:10px;
    height: 10px;
    display: block;
}

برای مشاهده مثال های عملی این آموزش حتما فیلم را مشاهده نمایید.