נבחר אלמנט של כותרת.
נלך ללשונית מתקדם > CSS מותאם ונשים את הקוד הבא:
selector a:hover{
color: #fff !important;
}
selector .elementor-widget-container {
position: relative;
text-decoration: none;
font-size: 21px;
font-weight: 500;
width: auto;
height: auto;
}
selector .elementor-widget-container::after {
background-color: #05FD75;
position: absolute;
content: "";
width: 0;
height: 50%;
bottom: 0;
right: 0;
transition: .5s;
z-index: 0;
opacity: 0.8;
}
selector .elementor-widget-container:hover::after {
width: 100%;
color: #fff !important;
}
selector .elementor-widget-container{
position: relative;
text-decoration: none;
color: #fff !important;
font-size: 21px;
font-style: normal;
font-weight: 500;
line-height: 35px;
letter-spacing: 0em;
text-align: right;
}
@media only screen and (max-width: 600px) {
selector .elementor-widget-container{
position: relative;
text-decoration: none;
color: #fff !important;
font-size: 21px !important;
font-style: normal;
font-weight: 500;
line-height: 30px;
letter-spacing: 0em;
text-align: right;
}
selector .elementor-widget-container {
position: relative;
text-decoration: none;
font-size: 20px;
width: auto;
height: auto;
}
}
והנה התוצאה:
ניתן גם לעשות שיופיע לכל גובה הכותרת על ידי שינוי שורה 21.
height: 50%;