Discussion approfondie sur l'utilisation des pseudo-éléments CSS avant et après

Les pseudo-éléments CSS avant et après sont un moyen d'ajouter des styles avant et après les éléments HTML. Ces deux pseudo-éléments CSS sont principalement utilisés pour ajouter des éléments décoratifs ou ajouter des styles supplémentaires au texte. Dans cet article, nous explorerons l’utilisation des pseudo-éléments CSS avant et après et fournirons quelques exemples pratiques.

1. L'utilisation de pseudo-éléments CSS avant et après

La syntaxe est la suivante :

选择器:before{ content: ""; /* 插入内容 */ 属性:属性值; }
选择器:after{ content: ""; /* 插入内容 */ 属性:属性值; }

Parmi eux, le sélecteur fait référence au sélecteur d'éléments qui doit insérer des éléments décoratifs, et avant et après sont des pseudo-éléments. Dans la syntaxe ci-dessus, la valeur de l'attribut content est utilisée pour insérer du contenu (tel que du texte, des images, etc.). De plus, les pseudo-éléments avant et après peuvent également utiliser d'autres attributs de style, tels que la couleur, l'arrière-plan, la bordure, etc.

2. Ajouter des préfixes et des suffixes de texte

L'une des utilisations les plus courantes des pseudo-éléments CSS avant et après consiste à ajouter des préfixes et des suffixes au texte. Par exemple, on peut utiliser le pseudo-élément before pour placer une petite icône avant le texte, comme indiqué ci-dessous :

Code HTML :

<p>下面是一些列表项：</p>
<ul>
  <li>CSS</li>
  <li>HTML</li>
  <li>JavaScript</li>
</ul>

Code CSS :

li:before{
  content: url('icon.png');
  margin-right: 5px;
}

De cette façon, on peut ajouter une petite icône devant de l’élément de liste.

Vous pouvez également utiliser le pseudo-élément après pour ajouter du contenu derrière le texte. Par exemple, on peut ajouter le symbole "/" à chaque cellule du tableau HTML, le code est le suivant :

Code HTML :

<table>
  <tr>
    <td>苹果</td>
    <td>橘子</td>
    <td>香蕉</td>
  </tr>
</table>

Code CSS :

td:after{
  content: "/";
  margin-left: 5px;
}

3 Créer un slider

Pseudo-CSS. éléments avant et après Peut également être utilisé pour créer des curseurs. Par exemple, nous pouvons créer un bouton slider avec une animation coulissante, le code est le suivant :

Code HTML :

<button class="slider">Slide to Unlock</button>

Code CSS :

.slider{
  width: 200px;
  height: 50px;
  border: none;
  background-color: #0084FF;
  color: #FFF;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-size: 1.2em;
}
.slider:before{
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  background: #FFF;
  top: 0;
  left: -5px;
  border-radius: 50%;
  transform: translateX(-100%) rotate(45deg);
  animation: slider 1s infinite;
}
@keyframes slider{
  0%{
    transform: translateX(-100%) rotate(45deg);
  }
  50%{
    transform: translateX(100%) rotate(45deg);
  }
  100%{
    transform: translateX(-100%) rotate(45deg);
  }
}

4. Créer un effet d'oreille de chien

Une autre utilisation courante du pseudo- CSS éléments avant et après La meilleure façon est de créer un effet de chanfrein. Par exemple, sur le titre de la page d'accueil du site, on peut utiliser les pseudo éléments avant et après pour créer un effet dog-ear. Le code est le suivant :

Code HTML :

<h1>Welcome to My Website</h1>

Code CSS :

h1{
  position: relative;
  text-align: center;
  color: #FFF;
  background-color: #0084FF;
  padding: 20px;
  margin: 0;
}
h1:before, h1:after{
  content: "";
  position: absolute;
  bottom: -20px;
  border: 20px solid transparent;
}
h1:before{
  border-top-color: #0084FF;
  left: 0;
}
h1:after{
  border-top-color: #0084FF;
  right: 0;
}

Ce qui précède. Il existe plusieurs utilisations des pseudo-éléments CSS avant et après . Que vous ajoutiez des préfixes et des suffixes au texte, créiez des boutons de curseur ou créiez un effet d'oreille de chien, les pseudo-éléments CSS avant et après peuvent ajouter de nouveaux éléments visuels à votre site Web. De cette façon, vous pouvez modifier le style et la mise en page sans ajouter de code HTML, ce qui rend votre site Web plus attrayant visuellement.

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!