web-dev-qa-db-fra.com

Comment remplacer un ensemble CSS sur un pseudo-élément?

Je sais que cela a été demandé auparavant, mais je ne trouve aucun moyen propre de remplacer ce CSS:

.ui-input-search:after {
    content: "";
    height: 18px;
    left: 0.3125em;
    margin-top: -9px;
    opacity: 0.5;
    position: absolute;
    top: 50%;
    width: 18px;
}

Je dois partir ui-input-search sur l'élément, mais peut ajouter ma propre classe, comme:

.ui-input-search-no-pseudo:after {
   content: "";
}

Question:
Existe-t-il un moyen simple de supprimer "pseudo-css" sans avoir à écraser la ligne CSS ligne par ligne?

Merci!

csscss3overridingpseudo-element
50
frequent

Pour autant que je sache, il n'y a pas d'autre moyen que de remplacer toutes les propriétés. Les styles sont définis sur l'élément, ils ne disparaîtront pas simplement à cause d'un autre sélecteur qui cible l'élément.

Si vous souhaitez uniquement supprimer le pseudo-élément de la page, vous pouvez faire content: none.

Ajouté à partir des commentaires ci-dessous:

La différence entre content: "" et content: none est que content: "" produit un pseudo-élément sans contenu (c'est-à-dire un pseudo-élément vide), tandis que content: none empêche le pseudo-élément d'être généré du tout.

103
Sacha

Ici content: ""; n'a aucun effet si vous souhaitez supprimer ce pseudo, vous devez utiliser content:none; il supprimera le pseudo contenu ajouté précédemment.

Si cela ne vous aide pas, vous pouvez également essayer:

display:none; 
//or 
display:none !important;

ici travaille jsfiddle

https://jsfiddle.net/ganeshswami99/52duu0x8/1/

6
Ganesh