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

به کمک شبه عناصر یا عناصر کاذب after: و before: در css می توانیم یک متن یا محتوا را در ابتدا یا انتهای یک تگ یا عنصر اضافه کنیم. این دو مفهوم کاربرد های فراوانی در ایجاد جلوه های زیبا در طراحی صفحات وب دارند.

آموزش after: و before: در css
Article مجازی

در این ویدئوی آموزشی با مفهوم after: و before: آشنا شده و با حالت های مختلف آن آشنا می شویم. در آموزش های بعدی کاربردهای آن را در طراحی صفحات وب آمورش می دهیم.

 

آموزش 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;
}

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

 

هزینه ها
انتخاب آیتم های ستاره دار اجباری است
عنوان هزینه تعداد
هزینه * رایگان -
محتوا
  • - دانلود ها

  • فیلم آموزش after: و before: در css

توسعه وب / HTML-CSS