Pseudo element in qt designer

Question

I wanted to create for the button a vertical line on the left with dimming on hover using a pseudo-element, but qt-designer styleSheet does not understand me and it is not displayed correctly here is my code:

QPushButton{
position: relative;
padding: 10px 20px;
border: none;
background-color: #fff;
color: #333;
cursor: pointer;
overflow: hidden;
}

QPushButton:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background-color: #C6C6C6;
opacity: 0.5;
transition: all 0.3s ease-in-out;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

QPushButton:hover:before {
background-color: #7F7F7F;
opacity: 0.8;
}

how it looks enter image description here as I want enter image description here

I tried to rewrite it in a different way, but I'm not very good at it

Answer 1

Qt does not support CSS 3.0 but it supports CSS 2.0. You need to modify your css to get what you want. Here is how to do:

QPushButton{
position: relative;
padding: 10px 20px;
border: none;
background-color: #fff;
color: #333;
cursor: pointer;
overflow: hidden;
}

QPushButton:hover {
width: 5px;
height: 100%;
border-left: 6px solid #7F7F7F;
opacity: 0.5;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;

opacity: 0.8;
}