Tous les exemples de l'annexe CSS

div#survol:hover {
  background-color:#000;
  color:#fff;
}

ul.groupe {
  display:inline-block;
  padding:0px;
  margin:10px;
}
ul.groupe li {
  display:inline-block;
  padding:5px;
  margin:0px;
  border-top:1px solid #000;
  border-bottom:1px solid #000;
  border-left:1px solid #000;
}
ul.groupe li:first-child {
  border-top-left-radius: 5px;	
  border-bottom-left-radius: 5px;	
}
ul.groupe li:last-child {
  border-top-right-radius: 5px;	
  border-bottom-right-radius: 5px;	
  border-right:1px solid #000;
}

ul.groupe li {
  background-color:#fff;
  color:#000;
  transition-property: background-color, color;
  transition-duration: 0.5s, 0.5s;  
}
ul.groupe li:hover {
  background-color:#000;
  color:#fff;
}

/* Pseudo-élément ::after */
a[target]::after {
  content:url(media/url_icon.gif);
  padding-left:5px;  
}

/* Pseudo-élément avec Fontawesome */
a.external::after {
  content:"\f35d";
  font-family:"Font Awesome 5 Free";
  padding-left:5px;
  font-weight:900;
  display: inline-block;  
  color:#aaa;
}

div#pointe {
  margin:20px;
  display: inline-block;
  border-width: 100px;
  border-style: solid;
  border-left-color:   #00f;  /* A gauche : bleu  */
  border-top-color:    #fff;  /* En haut  : blanc */ 
  border-right-color:  #f00;  /* A droite : rouge */
  border-bottom-color: #000;  /* En bas   : noir  */
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes bump {
  from { transform: translate(-50px, 0); }
  to   { transform: translate(50px,  0); }
}
@keyframes rotate3 {
  from { transform: rotate3d(0, 1, 0, 0deg);; }
  to   { transform: rotate3d(0, 1, 0, 180deg);; }
}

div.pastille {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #d00;
  color: #fff;
  font-size:20px;
  font-weight: bold;
  border: 1px solid #000;	
  border-radius: 50%;
}