Créez trois points verticaux (points de suspension) à l’intérieur d’un cercle

Je veux faire un cercle

, comme cette image:

voici l'image

J’ai essayé ce code.

 .discussion:after { content: '\2807'; font-size: 1em; background: #2d3446; width: 20px; height: 20px; border-radius: 100px; color:white; }

Comment puis-je le faire correctement?

Vous pouvez simplement utiliser :after pseudo-élément avec content: '•••' et transform: rotate . Notez qu’il s’agit du caractère spécial HTML de la puce • ou \u2022 .

 div { position: relative; background: #3F3C53; width: 50px; height: 50px; color: white; border-radius: 50%; box-shadow: 0px 0px 15px 1px #4185BC; margin: 50px; } div:after { content: '•••'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); font-size: 15px; letter-spacing: 4px; margin-top: 2px; }

Améliorant la réponse de Nenad Vracar , en voici un qui n’utilise pas de texte (donc il est indépendant de la police) et tout est bien centré:

 div { position: relative; background: #3F3C53; width: 50px; height: 50px; border-radius: 50%; box-shadow: 0px 0px 15px 1px #4185BC; margin: 50px; } div:after { content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; margin-left: -1px; margin-top: -1px; background-color: white; border-radius: 50%; box-shadow: 0 0 0 2px white, 0 11px 0 2px white, 0 -11px 0 2px white; }

Encore une autre réponse, comme les autres sauf:

il utilise le caractère de points de suspension vertical (U + 22EE)
text-align et line-height pour centrer le contenu
n’utilise aucune valeur de pixel

 .discussion:after { content: "\22EE"; /* box model */ display: inline-block; width: 1em; height: 1em; /* decoration */ color: #FFFFFF; background-color: #000000; border-radius: 50%; /* center align */ line-height: 1; text-align: center; }

Utilisez ce code.

 .discussion { width: 20px; height: 20px; border-radius: 50%; position: relative; background: #2d3446; } .discussion:after { content: '\22EE'; font-size: 1em; font-weight: 800; color: white; position: absolute; left: 7px; top: 1px; }

J’espère que c’est ce que tu voulais! Sinon, n’hésitez pas à demander.

 .discussion{ display: block; /* needed to make width and height work */ background: #2d3446; width: 25px; height: 25px; border-radius: 100px; display: flex; align-items: center; justify-content: center; } .discussion:after { content: '\2807'; font-size: 1em; color: white; margin-left: 15%; }

Utiliser des points de texte

 .discussion{ width:50px; height:50px; text-align:center; background-color:black; border: 2px solid red; border-radius: 100%; } .discussion text{ writing-mode: tb-rl; margin-top:0.4em; margin-left:0.45em; font-weight:bold; font-size:2em; color:white; }

...

 .discussion:after { content: '\2807'; font-size: 1em; display: inline-block; text-align: center; background: #2d3446; width: 20px; height: 20px; border-radius: 50%; color: white; padding:3px; }

J’ai supprimé (j’ai trouvé comment le faire) tout mon post, le code suivant fonctionne pour 3 points verticaux dans un cercle noir

 .discussion:after{ display:inline-block; content:'\22EE'; line-height:100%; border-radius: 50%; margin-left:10px; /********/ font-size: 1em; background: #2d3446; width: 20px; height: 20px; color:white; }