Effet d'application et d'implémentation du sélecteur de pseudo-éléments CSS::before

Effet d'application et d'implémentation du sélecteur de pseudo-élément CSS::before

CSS::before sélecteur de pseudo-élément est un sélecteur de pseudo-classe couramment utilisé en CSS. Il peut insérer un élément virtuel avant le contenu de l'élément. . éléments et peuvent être décorés et embellis grâce aux styles CSS. Dans cet article, nous présenterons les effets d'application et d'implémentation du sélecteur de pseudo-éléments ::before, et fournirons des exemples de code spécifiques pour référence.

1. Scénarios d'application

1. Décoration de texte : insérez des icônes, des étiquettes, des images et d'autres contenus devant le texte pour améliorer l'expressivité du texte
2. Décoration d'image : ajoutez des ombres, des bordures ou d'autres effets devant le texte ; image pour améliorer la beauté de l'image ;
3. Décoration de liste : ajoutez des logos ou des numéros de série aux éléments de la liste pour augmenter la lisibilité de la liste
4. Étiquettes personnalisées : obtenez des effets d'étiquette personnalisés grâce au sélecteur de pseudo-éléments ::avant ;
Décoration d'arrière-plan : utilisation : Le sélecteur de pseudo-élément :before ajoute un arrière-plan, une bordure et d'autres effets aux éléments du conteneur.

2. Exemple d'effet d'implémentation

Exemple de décoration de texte

1. <style>
     .icon::before {
       content: "002";
       font-family: "Font Awesome 5 Free";
       color: red;
       margin-right: 5px;
     }
   </style>
   
   <p class="icon">CSS ::before伪元素选择器示例</p>

Avec le code ci-dessus, nous avons utilisé la bibliothèque d'icônes Font Awesome pour ajouter une icône au texte et définir la couleur rouge et la marge droite.

Exemple de décoration d'image

<style>
  .image-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .image-container:hover::before {
    opacity: 1;
  }
</style>

<div class="image-container">
  <img src="example.jpg" alt="Example Image">
</div>

Dans le code ci-dessus, nous avons ajouté un masque noir translucide au conteneur d'image. Lorsque la souris survole l'image, la transparence du masque passe à 1, réalisant l'effet d'embellissement de l'image.

Exemple de décoration de liste

<style>
  ul li::before {

    color: red;
    margin-right: 5px;
  }
</style>

<ul>
  <li>列表项一</li>
  <li>列表项二</li>
  <li>列表项三</li>
</ul>

Dans le code ci-dessus, nous utilisons des points pleins comme symbole de la liste pour obtenir l'effet décoratif des éléments de la liste.

Exemple de balise personnalisée

<style>
  .custom-tag::before {
    content: "Tag: ";
    font-weight: bold;
  }
</style>

<p class="custom-tag">自定义标签示例</p>

Dans le code ci-dessus, nous ajoutons une balise personnalisée au paragraphe, implémentée via le sélecteur de pseudo-élément ::before.

Exemple de décoration d'arrière-plan

<style>
  .container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(background.jpg);
    background-size: cover;
    opacity: 0.5;
    z-index: -1;
  }
  
  .content {
    position: relative;
    z-index: 1;
  }
</style>

<div class="container">
  <div class="content">
    <h1>背景装饰示例</h1>
    <p>这是一段示例文本。</p>
  </div>
</div>

Dans le code ci-dessus, nous avons ajouté une image d'arrière-plan à l'élément conteneur, défini l'opacité sur 0,5 et contrôlé son niveau via l'attribut z-index pour obtenir l'effet de décoration d'arrière-plan.

3. Résumé

Avec le sélecteur de pseudo-éléments CSS ::before, nous pouvons obtenir une variété d'effets décoratifs et ajouter plus de beauté et d'expressivité aux éléments de la page Web. Lorsque nous utilisons le sélecteur de pseudo-éléments ::before, nous devons faire attention à la façon dont le sélecteur est écrit, spécifier le contenu inséré via l'attribut content, et le décorer et l'embellir via d'autres styles CSS. J'espère que l'exemple de code fourni dans cet article pourra vous aider à mieux comprendre et appliquer le sélecteur de pseudo-élément ::before.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!