Pseudo-éléments dans le concepteur Qt

Question

Je souhaite utiliser des pseudo-éléments pour créer une ligne verticale pour le bouton de gauche et l'atténuer au survol, mais qt-designer styleSheet ne me comprend pas et ne s'affiche pas correctement, voici mon 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;
}

À quoi ça ressemble ? Entrez la description de l'image ici comme je le souhaite Entrez la description de l'image ici

J'ai essayé de le réécrire d'une manière différente mais je ne suis pas très doué pour ça

Answer 1

Qt ne prend pas en charge CSS 3.0, mais prend en charge CSS 2.0. Vous devez modifier votre CSS pour obtenir ce que vous voulez. Les méthodes spécifiques sont les suivantes :

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;
}