Maison >interface Web >Questions et réponses frontales >Comment implémenter des flèches avec des lignes horizontales en CSS

Comment implémenter des flèches avec des lignes horizontales en CSS

青灯夜游original: 2022-04-25 18:58:204950parcourir

Méthode : 1. Définissez un élément vide ; 2. Utilisez "::before" et content pour insérer une ligne horizontale, la syntaxe est "Element::before{content:"——"}" ; :after" et Content insère une flèche avec la syntaxe "Element::after{content:">"}".

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

css pour implémenter des flèches avec des lignes horizontales

Méthode d'implémentation :

Définir un élément vide, (comme une balise span qui ne contient pas de contenu)
Utilisez le sélecteur ::before et l'attribut content pour insérer une ligne horizontale
Utilisez le sélecteur ::after et l'attribut content pour insérer une flèche

Exemple d'implémentation :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span::before{
content: "——";
}
span::after{
content: ">";
}
p::before{
content: "<";
}
p::after{
content: "=";
}
    </style>
</head>
 
<body>
    <span></span>
<p></p>
</body>
 
</html>

Comment implémenter des flèches avec des lignes horizontales en CSS

Description : ::before selector et ::after selector

: Le sélecteur avant insère du contenu avant l'élément sélectionné.

::after le sélecteur insère du contenu après l'élément sélectionné.

Les sélecteurs ::before et ::after doivent tous deux utiliser l'attribut content pour spécifier le contenu à insérer.

Connaissances approfondies : scénarios d'utilisation du contenu

La définition du contenu mentionne qu'il est utilisé en conjonction avec les pseudo-éléments :before et :after. :before et :after sont les pseudo-éléments les plus courants, et tout le monde doit les connaître.

Une brève introduction à :before et :after :

Affichage par défaut : en ligne ;
L'attribut de contenu doit être défini, sinon il sera invalide : sélection par l'utilisateur par défaut : aucun, c'est-à-dire le contenu de ; :before et :after ne peuvent pas être utilisés par l'utilisateur Selected ;
ne peuvent pas être utilisés via dom, ce qui signifie que les éléments de page qui n'existent pas eux-mêmes ne peuvent pas être trouvés dans le code source HTML, mais leur existence peut être vue visuellement.
Jetons un coup d'œil aux principaux scénarios d'utilisation :

Insérer des caractères

L'utilisation de contenu pour insérer des caractères définit généralement une valeur par défaut pour un élément vide, similaire à l'attribut placeholder de input, qui n'est affiché que lorsque le L'élément n'a pas de contenu. Le code est le suivant :

<p>有内容的段落</p>
<p></p>

<!--:empty 是一个 CSS 选择器，当元素里面无内容的时候进行匹配-->
p:empty::before {
  content: &#39;空元素内容&#39;;
  color: red;
}

L'effet est le suivant :

Comment implémenter des flèches avec des lignes horizontales en CSS

Génération d'éléments auxiliaires

Le point central en ce moment n'est pas le contenu généré par le contenu, mais le pseudo. élément lui-même. Habituellement, nous mettons du contenu la valeur de la propriété est définie sur une chaîne vide et un autre code CSS est utilisé pour générer des éléments d'assistance, ou pour obtenir des effets graphiques, ou pour obtenir une mise en page spécifique.

<div class="content-box"></div>

.content-box {
  height: 100px;
  width: 200px;
  border-radius: 10px;
  position: relative;
  background: #fff;
}
.content-box::after {
  content: &#39;&#39;;
  position: absolute;
  top: 100%;
  right: 16px;
  width: 4px;
  height: 16px;
  border-width: 0;
  border-right: 12px solid #fff;
  border-radius: 0 0 32px 0;
}

L'effet est le suivant :

Comment implémenter des flèches avec des lignes horizontales en CSS

<div class="info-box clear">
  <div class="left">左</div>
  <div class="right">右</div>
</div>

.clear::after {
 content: &#39;&#39;;
 display: block;
 clear: both;
}

Les trois ci-dessus sont indispensables :

content: '' : Ajoutez un pseudo-élément vide à l'élément via ::after.

clear : Both : Effacer les flotteurs afin qu'aucun côté de l'élément ne flotte.
display: block: clear ne prend effet que sur les éléments de niveau bloc.
Effacez le flotteur en ajoutant un élément et touchez le BFC pour que la hauteur de l'élément puisse s'adapter à la hauteur du sous-caisson.

Génération d'images

Utilisez la fonction URL directement pour afficher les images. Vous pouvez ajouter des images avant et après le texte et remplacer directement le texte.

L'image remplace directement le texte. Le code est le suivant :

<p class="img-test">文字</p>

.img-test {
  display: block;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  content: url(&#39;../assets/test2.jpg&#39;);
}

Ajoutez des images avant et après le texte. Le code est le suivant :

<!--方案一 -->
.img-test::after {
  content: url(&#39;../assets/test2.jpg&#39;);
}

<!--方案二 -->
.img-test::after {
  content: &#39;&#39;;
  display: block;
  height: 20px;
  width: 20px;
  background: url(&#39;../assets/test2.jpg&#39;);
}

Dans le premier plan, le pseudo élément définit l'image à travers le contenu. La taille de l'image est difficile à contrôler. L'image affichée est la taille originale, qui est relativement floue. Généralement, l'image d'arrière-plan du schéma 2 est utilisée et la taille peut être définie selon les besoins.

Génération de contenu de valeur d'attribut attr

Utilisez attr pour obtenir la valeur d'attribut d'élément pour obtenir l'effet. Il est généralement utilisé pour obtenir la connexion d'une balise. Le code est le suivant :

<a class="baidu-link" href="https://baidu.com"> 百度一下，你就知道!</a>

.baidu-link::after {
  content: " (" attr(href) ") "
}

L'effet est le suivant. :

Comment implémenter des flèches avec des lignes horizontales en CSS (Partage de vidéos d'apprentissage :

Tutoriel vidéo CSS

, front-end web)

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Il existe plusieurs types de décorateurs dans es6Article suivant：Il existe plusieurs types de décorateurs dans es6

Articles Liés

Voir plus