جهت انیمیشن شدن در حالت hover css

a{
     -o-transition:color .2s ease-out, background 2s ease-in;
     -ms-transition:color .2s ease-out, background 2s ease-in;
     -moz-transition:color .2s ease-out, background 2s ease-in;
     -webkit-transition:color .2s ease-out, background 2s ease-in;
     transition:color .2s ease-out, background 2s ease-in;
}

کد فوق باید در a باشد

تغییر اندازه ستون های bootsrap 4 با flex

گاهی اوقات لازم است که اندازه استاندارد col-lg-3 را کمی کاهش دهیم اما ستون کناری که col-lg-9 است مقداری فضای خالی در سمت راست اضافه میشود

bootstrap 4 از سیستم flex-box استفاده میکند و ما بدون نیاز به دست کاری متغییر ها و استاندارهای آن از ۲ کلاس کمی استفاده کنیم مثلا

<style media="screen">

.col-side-right{
  flex: 0 0 20% !important;
  max-width: 20%;
}

.col-side-left{
  flex: 0 0 80%;
  max-width: 80%;
}

</style>

<div class="row">
  <div class="col-lg-3 col-side-right">
    
  </div>
  <div class="col-lg-9 col-side-left">
    
  </div>
</div>


دو کلاس col-side-left و col-side-right با تغییر درصد های پیش فرض col-lg-3 از ۲۵٪ به ۲۰٪ باعث کوچکتر شدن عرض col-lg-3 میشود

درج تصویر پس زمینه بعد از متن در CSS

سلام برای خود من سوال بود که چطوری میتونم کاری بکنم که بعد از عنوانی که برای یک منو انتخاب میکنم بتونم یک طرح گرافیکی را قرار بدم یک راه حل کاربردی را برای شما دوستان معرفی میکنم.


.title_with_bg
{
font-size:14px;
font-weight:20px;
}
.title_with_bg:after {

background: url("../img/title-bg.jpg") no-repeat;
display: block;
position: relative;
width: 20%;

padding-bottom: 1%;
background-size: 100%;

content: "";

display: inline-block;

}