web-dev-qa-db-fra.com

Trois points sous l'élément de bloc

Je voulais concevoir quelque chose comme l'image ci-dessous, mais je ne savais pas comment faire!

Titre avec trois points

 enter image description here

Je voulais donc afficher 3 points au centre en dessous de mon titre. Mais lorsque j'essaie avec dottedborder-bottom, la balise <h1> entière est utilisée.

h1{
  text-align: center;
  font-size: 50px;
  color: red;
  border-bottom: 10px dotted red;
}
<h1>My Title</h1>

htmlcsshtml5css3
27
kumar

Essayez quelque chose comme extrait ci-dessous. Utilisez des étendues pour créer des points et les aligner au centre.

h1 {
  text-align: center;
  font-size: 50px;
  margin-bottom: 10px;
  color: red;
}

.three-dots {
  text-align: center;
}

.three-dots span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: red;
  display: inline-block;
  margin: 0 5px;
}
<h1>My Title</h1>
<div class="three-dots">
  <span></span>
  <span></span>
  <span></span>
</div>

Mise à jour: Oui bien sûr, j’accepte le fait que ce n’est pas la solution parfaite. Mais en même temps, je suis sûr que ce sera l’une des meilleures solutions où vous pourrez personnaliser chaque point avec une couleur et une taille différentes de manière simple, comme indiqué ci-dessous. Sinon, je serais d'accord Manish Patel answer est le meilleur.

h1 {
  text-align: center;
  font-size: 50px;
  margin-bottom: 10px;
  color: red;
}

.three-dots {
  text-align: center;
}

.three-dots span {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: red;
  display: inline-block;
  margin: 0 5px;
}

span.first {
  background-color: green;
  width: 10px;
  height: 10px;
}

span.third {
  background-color: blue;
  width: 20px;
  height: 20px;
}
<h1>My Title</h1>
<div class="three-dots">
  <span class="first"></span>
  <span class="second"></span>
  <span class="third"></span>
</div>

3
RaJesh RiJo

::after pseudo-élément __ utilisé pour cela

h1{
  text-align: center;
  font-size: 50px;
  color: red;
  line-height: 30px;
}
h1::after{
  content:"...";
  font-size: 50px;
  color: gold;
  display: block;
  text-align: center;
  letter-spacing: 5px;
}
<h1>My Title</h1>

54
Manish Patel

Un pseudo-élément et plusieurs ombres portées. (drop ou box)

Remarque: avec cette méthode, vous pouvez contrôler la couleur de chaque point .

Ombre portée 

  h1 {
  text-align: center;
  font-size: 50px;
  color: red;
  position: relative;
}

h1::after {
  content: "";
  position: absolute;
  width: .25em;
  height: .25em;
  border-radius: 50%;
  background: orange;
  bottom: 0;
  left: 50%;
  margin-bottom: -.5em;
  transform: translateX(-50%);
  filter: drop-shadow(.5em 0px 0px blue) 
          drop-shadow(-.5em 0px 0px green);
}
<h1>My Title</h1>

Box Shadow (merci à Ilmari Karonen)

  h1 {
  text-align: center;
  font-size: 50px;
  color: red;
  position: relative;
}

h1::after {
  content: "";
  position: absolute;
  width: .25em;
  height: .25em;
  border-radius: 50%;
  background: orange;
  bottom: 0;
  left: 50%;
  margin-bottom: -.5em;
  transform: translateX(-50%);
  box-shadow: .5em 0px 0px blue, 
              -.5em 0px 0px green;
}
<h1>My Title</h1>

29
Paulie_D

Utilisez ::after pseudo element.

h1{
  text-align: center;
  font-size: 50px;
}
h1:after{
  content: "";
  display: block;
  width: 50px;
  margin: 10px auto;
  border-bottom: 10px dotted red
}
<h1>My title</h1>

11
wscourge

Même réponse de manish-patel , mais ...

Comme je préfère

  • pas forcer la taille de la police
  • utilisez une unité de taille em adaptative au lieu de pt ou px fixe.
  • K eep I t S hort et S imple

Cela utilisera UTF-8, un des cercle noir:

&#10625;   U+2981    Z NOTATION SPOT          ⦁
&#8226;    U+2022    BULLET                   •
&#9679;    U+25CF    BLACK CIRCLE             ●
&#9899;    U+26AB    MEDIUM BLACK CIRCLE      ⚫
&#11044;   U+2B24    BLACK LARGE CIRCLE       ⬤


h1{
  text-align: center;
  line-height: 1.3em;
}
h1::after{
  content:"⚫ ⚫ ⚫";
  color: gold;
  display: block;
}
<h1>My Title</h1>

Avec une petite amélioration: ajouter une bordure floue aux points

h1        { text-align: center; line-height: 1.3em; }
h1::after { content:"⚫ ⚫ ⚫"; color: gold; display: block;
            text-shadow: 0em 0em .12em #530; }
<h1>My Title</h1>

4
F. Hauri

Utilisez simplement le pseudo-sélecteur :: after et définissez un line-height pour votre élément h1 afin d’espacer verticalement les points du titre. Utilisez Georgia comme police Web pour les points, car Arial a des points carrés.

N'oubliez pas que vous pouvez utiliser les deux syntaxes, mais utilisez de préférence le ::after pour distinguer les pseudo-classes .__ des pseudo-éléments.

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

CSS3 a introduit la notation :: after (avec deux points) pour distinguer pseudo-classes à partir de pseudo-éléments. Les navigateurs acceptent également: après, introduit dans CSS2. Mises en garde

h1{
  text-align: center;
  font-family: Arial;
  font-size: 40px;
  color: black;
  line-height: 20px;
}

h1::after {
   content: '...';
   display: block;
   font-family: Georgia, sans-serif;
   font-size: 100px;
   color: #FEC832;
}
<h1>My Heading</h1>

4
Alessandro Incarnati

Une solution avec flexbox:

h1 {
  text-align: center;
  font-size: 48px;
  color: black;
  line-height: 24px;
}
h1::after {
    content: "...";
    font-size: 72px;
    color: gold;
    display: flex;
    justify-content: center;
    letter-spacing: 5px
}
<h1>
  My Heading
</h1>

0
Gerard Simpson

Voici une autre solution de la même manière que la solution de Paulie_D mais au lieu de drop-shadow/box-shadow, je vais utiliser plusieurs dégradés radiaux pour créer chaque cercle. Ensuite, vous pouvez facilement contrôler le nombre des cercles, leur position, couleurs et taille.

3 cercles au besoin

h1 {
  text-align: center;
  font-size: 50px;
  color: red;
  position: relative;
}

h1::after {
  content: "";
  position: absolute;
  width: 1.5em;
  height: .25em;
  background: radial-gradient(circle at center, blue 50%,transparent 51%) 0 -4px/11px 21px no-repeat, 
              radial-gradient(circle at center, orange 50%,transparent 51%) .6em -4px/11px 21px no-repeat,
              radial-gradient(circle at center, green 50%,transparent 51%) 1.2em -4px/11px 21px no-repeat;
  bottom: 0;
  left: 50%;
  margin-bottom: -.5em;
  transform: translateX(-50%);
}
<h1>My Title</h1>

5 cercles (et nous allons à tous les nombres)

h1 {
  text-align: center;
  font-size: 50px;
  color: red;
  position: relative;
}

h1::after {
  content: "";
  position: absolute;
  width: 1.5em;
  height: .25em;
  background: radial-gradient(circle at center, blue 50%,transparent 51%) 0 -4px/11px 21px no-repeat, 
              radial-gradient(circle at center, orange 50%,transparent 51%) .3em -4px/11px 21px no-repeat,
              radial-gradient(circle at center, brown 50%,transparent 51%) .6em -4px/11px 21px no-repeat,
              radial-gradient(circle at center, pink 50%,transparent 51%) .9em -4px/11px 21px no-repeat,
              radial-gradient(circle at center, green 50%,transparent 51%) 1.2em -4px/11px 21px no-repeat;
  bottom: 0;
  left: 50%;
  margin-bottom: -.5em;
  transform: translateX(-50%);
}
<h1>My Title</h1>

0
Temani Afif