اغلب در وبسایت های مختلف دیدیم که در دو طرف یک تایتل دو خط راست کشیده شده است مثل تصویر پایین
در اینجا میخواهم mixin این کد را منتشر کنم تا بقیه هم بتوانند استفاده کنند .
اینم mixin:)
@mixin line-title($class-name,$right,$left,$bg-color) {
#{$class-name}:before,#{$class-name}:after {
background-color: $bg-color;
content: " ";
display: inline-block !important;
height: .5px;
position: absolute;
vertical-align: middle;
width: 10rem;
margin-top: 26px;
z-index: 1;
}
#{$class-name}:before{
right:$right;
}
#{$class-name}:after{
left:$left;
}
}
فقط توجه داشته باشید که این mixin را به تگ parent بدید : مانند عکس زیر
در اینجا mixin را به کلاس row میدهیم اما برای تایتل h1 (مهارت های من) اعمال میشود
کد css مورد نظر:)
در این mixin سه تا متغیر هست که میتونید با توجه به تایتل متغیر باشه
یکیش کلاس child
دوتای دیگ هم فاصله چپ و راست تایتل از دو طرف صفحه
و آخری هم رنگ بک گراند میتونید تعیین کنید
موفق باشید:)
