I want to use a pseudo element to create a vertical line for the button on the left and dim it on hover, but qt-designer styleSheet doesn't understand me and it doesn't display 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 does it look? Enter image description here as i wish Enter image description here
I tried rewriting it in a different way but I'm not very good at it
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Qt does not support CSS 3.0, but supports CSS 2.0. You need to modify your CSS to get what you want. The specific methods are as follows:
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; }