I was attempting to add a vertical line to the left of a button with a hover effect using a pseudo-element in qt-designer styleSheet, but it was not displaying correctly. Here is the code I used:
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;
}
Here is how it currently looks: enter image description here And this is how I want it to look: enter image description here
I attempted to revise it in a different manner, but I struggled with it.