comment ajouter une icône à un div en utilisant les pseudo éléments - CSS

user1234

Je veux ajouter une icône en tant que connecteur avant un conteneur div: quelque chose comme ceci:

entrez la description de l'image ici

C'est ce que j'ai ( https://jsfiddle.net/kmcursf6/ ).

.parent {
  border-left: 1px solid #ff0000;
}

.child {
  position: relative;
  margin-left: 20px;
  background: #e9e9e9;
  margin-bottom: 10px;
  padding: 10px;
}

.child::before {
  position: absolute;
  content: '';
  left: -20px;
  top: 50%;
  border-top: 1px solid #ff0000;
  width: 20px;
}

.child:last-child::after {
  position: absolute;
  content: '';
  left: -21px;
  top: calc(50% + 1px);
  bottom: 0;
  border-left: 1px solid #FFFFFF;
}
<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  </div>
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  </div>
  <div class="child">
    click to add more
  </div>
</div>

J'ai essayé ceci pour ajouter cette icône:

.child::before {
  position: absolute;
  content: '';
  left: -20px;
  top: 50%;
  width: 20px;
  transform: rotate(90deg);
  border-radius: 20px;
}

mais ça ne marche pas et ça jette complètement ce que j'ai. Des idées pour y arriver?

Richard

Il est difficile de créer un cercle noir et une ligne horizontale au milieu en utilisant uniquement du CSS. Par conséquent, je suis arrivé à la conclusion que le cercle et la ligne horizontale doivent être deux pseudo-éléments séparés.

Dans ce cas, le ::afterpseudo-élément crée la partie cercle. De plus, nous utilisons le z-indexpour faire en sorte que le cercle complet n'apparaisse que sous forme de demi-cercle car la moitié est couverte par div.child.

Quant à la ligne horizontale, nous la créons toujours en utilisant le ::beforepseudo-élément. Cependant, la ligne (à partir de celle du parent border-left) dépasse et nous voulons faire disparaître le dernier bit de fin de la ligne de type liste. Pour ce faire, nous pouvons modifier le dernier div.child« de ::beforepseudo-élément pour qu'il soit à la place d' un rectangle. Réglez sa hauteur à 50% de div.child, positionnez-le à 50% du haut du div.child, faites le border-topnoir pour créer la ligne horizontale et faites le border-leftblanc pour couvrir la ligne de fin du parent.

Voici un exemple fonctionnel. J'ai utilisé 4pxle dernier div.child::beforepseudo-élément pour qu'il ne se dessine pas mal lors du zoom. En outre, vous voudrez peut-être lire box-sizing: border-boxici (bien que non lié).

.parent {
  font-family: Helvetica;
  font-size: 0.8em;
  border-left: 1px solid #000;
}

.child {
  position: relative;
  margin-left: 20px;
  background: #e9e9e9;
  margin-bottom: 10px;
  padding: 10px;
}

.child::before {
  position: absolute;
  content: '';
  top: 50%;
  left: -20px;
  border-top: 1px solid #000;
  width: 20px;
}

.child::after {
  position: absolute;
  z-index: -1;
  content: '';
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  background: black;
  border-radius: 50%;
  transform: translateY(-50%);
}

.child:last-child::before { 
  box-sizing: border-box;
  border-left: 4px solid #FFF;
  height: 50%;
  left: -22px;
}
<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  </div>
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  </div>
  <div class="child">
    click to add more
  </div>
</div>

Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.

En cas d'infraction, veuillez [email protected] Supprimer.

modifier le
0

laisse moi dire quelques mots

0commentaires
connexionAprès avoir participé à la revue

Articles connexes

Comment puis-je contenir une icône de police impressionnant dans un élément div en CSS?

Font Awesome 5 sur les pseudo éléments affiche un carré au lieu d'une icône

Comment ajouter une icône à un button_tag en utilisant HAML?

Comment ajouter un champ de recherche avec une icône à la barre de navigation en utilisant Materialise CSS?

Comment ajouter une icône à l'intérieur d'un bouton en forme de bouton ovale

Comment insérer une icône et du texte et un dans un div en utilisant Pug?

Comment puis-je ajouter une classe spécifique à un élément en cliquant sur un div en utilisant jquery?

Comment ajouter une icône dans un td à la fin de chaque ligne en utilisant ng-repeat?

En Python, comment ajouter tous les éléments d'une liste à un ensemble?

comment changer l'icône d'un div en cliquant et en utilisant vanilla js?

Comment ajouter un curseur à l'élément parent et l'appliquer également aux éléments enfants en utilisant CSS?

Comment organiser les éléments d'une liste en colonnes en utilisant CSS?

comment ajouter dynamiquement une icône de police à un bouton en utilisant javascript et html?

Comment garder l'icône dans son état modifié une fois cliqué. en utilisant le CSS

Comment ajouter une chaîne à tous les éléments existants dans un tableau en javascript?

Comment ajouter une bordure aux éléments dans un contrôle Listview en utilisant C #?

Comment ajouter du CSS à des pseudo éléments en utilisant jquery ou javascript?

Comment rechercher une chaîne dans les éléments d'un tableau en utilisant javascript?

Ajouter une icône en CSS

comment ajouter du texte à une balise dans js en utilisant innertext et ajouter à l'identifiant d'un div?

Comment ajouter une icône d'image au-dessus d'un panneau div en utilisant CSS et Bootstrap ?

Comment ajouter une chaîne à tous les éléments de liste dans un ul en utilisant javascript ?

Comment puis-je modifier une icône Font Awesome en utilisant :: avant le pseudo sélecteur CSS dans une application React ?

Comment concevoir les éléments suivants en utilisant du CSS pur, du HTML et du Bootstrap (avec l'icône de vérification) ?

Comment changer les éléments d'un div en utilisant ajax ?

Comment obtenir tous les éléments d'un tableau struct et les ajouter dans une chaîne en c?

Comment puis-je activer une icône en utilisant un identifiant et non une classe et comment puis-je la supprimer et l'ajouter automatiquement ?

comment pourrais-je ajouter les éléments d'une liste <dynamique> à une liste <objet> en utilisant le flutter

Comment retourner aligner les éléments les uns après les autres dans un div en utilisant css et réagir ?

TOP liste

  1. 1

    Comment désactiver ou activer le balayage de Viewpager dans Android

  2. 2

    Créer une table externe Hive à partir de fichiers de parquet partitionnés dans Azure HDInsights

  3. 3

    Comment changer le navigateur par défaut en Microsoft Edge pour Jupyter Notebook sous Windows 10 ?

  4. 4

    Enregistrer le chemin de l'image de la galerie vers la base de données de la salle et l'afficher dans la liste des recycleurs

  5. 5

    Concaténer des variables dans ansible

  6. 6

    ESP8266 HADRWARE MINUTERIE, USA pour cocher une macro étrange

  7. 7

    Stop jQuery execution after one time execution

  8. 8

    Filtrer les données en fonction des conditions d'une trame de données

  9. 9

    Comment analyser un fichier avec un tableau d'objets JSON en utilisant Node.js?

  10. 10

    obtenir le nombre de marqueur affiché sur la carte

  11. 11

    Comment centrer un div tout en utilisant la transition et transformer avec l'échelle

  12. 12

    Comment utiliser le stockage local et le supprimer lorsqu'il n'est pas nécessaire

  13. 13

    Redirection HTTP vers HTTPS dans Java à l'aide de HTTPURLConnection

  14. 14

    Comment envoyer plusieurs variables de la lame au contrôleur

  15. 15

    Comment définir du texte dans un QLabel et afficher les caractères '<>'?

  16. 16

    Échec de l'exécution de 'insertBefore' sur 'Node': le paramètre 1 n'est pas de type 'Node'

  17. 17

    System.Data.SqlClient.SqlException: 'Nom de colonne non valide' ApplicationRoleId '.'

  18. 18

    Générer une variable binaire avec une corrélation prédéfinie avec une variable déjà existante

  19. 19

    la mise en place Spring dans Eclipse - Échec d'initialisation de contexte

  20. 20

    comment afficher un bouton au-dessus d'un autre élément ?

  21. 21

    Uncaught TypeError: map n'est pas une fonction dans Reactjs avec Firebase

chaudétiquette

Archive