wake-up-neo.net

Drei Punkte unter Blockelement

Ich wollte etwas wie unter dem Bild entwerfen, aber nicht sicher, wie es geht!

Titel mit drei Punkten

 enter image description here

Ich wollte also nur 3 Punkte in der Mitte unter meinem Titel anzeigen. Wenn ich es jedoch mit dottedborder-bottom versuche, ist der gesamte <h1>-Tag erforderlich.

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

htmlcsshtml5css3
27
kumar

Versuchen Sie etwas wie unter dem Ausschnitt. Verwenden Sie Felder, um Punkte zu erstellen und sie in der Mitte auszurichten.

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>

Update: Ja, natürlich akzeptiere ich, dass dies nicht die perfekte Lösung ist. Aber gleichzeitig bin ich sicher, dass dies eine der besten Lösungen sein wird, bei der Sie anpassen Sie die einzelnen Punkte mit unterschiedlicher Farbe und Größe auf einfache Weise wie im folgenden Snippet. Ansonsten würde ich zustimmen Manish Patel Antwort ist die beste.

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

Verwendet ::after Pseudoelement dafür

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

Ein Pseudoelement und mehrere Schlagschatten. (Drop oder Box)

Hinweis: Mit dieser Methode können Sie die Farbe von jedem Punkt steuern.

Schlagschatten 

  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 (Danke an 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

Verwenden Sie ::after Pseudoelement.

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

Gleiche manish-patel Antwort, aber ...

Wie ich lieber möchte

  • schriftgröße nicht erzwingen
  • verwenden Sie die adaptive em Größeneinheit anstelle der festen pt oder px.
  • [~ # ~] k [~ # ~] eep [~ # ~] i [~ # ~] t [~ # ~] s [~ # ~] hort und [~ # ~] s [~ # ~] implementieren

Dies wird UTF-8 verwenden, eines von schwarzer Kreis:

&#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>

Mit einer kleinen Verbesserung: Hinzufügen von Unschärferändern zu Punkten

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

Verwenden Sie einfach den :: after pseudo-Selektor und definieren Sie eine Zeilenhöhe für Ihr Element h1, um die Punkte vertikal aus dem Titel zu platzieren. Verwenden Sie Georgia als Webfont für die Punkte, während Arial Punkte im Quadrat hat.

Denken Sie daran, dass Sie beide Syntax verwenden können, verwenden Sie jedoch vorzugsweise ::after, um Pseudo-Klassen von Pseudo-Elementen zu unterscheiden.

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

CSS3 führte die :: after-Notation (mit zwei Doppelpunkten) zur Unterscheidung von .__ ein. Pseudoklassen aus Pseudoelementen. Browser akzeptieren auch: after, in CSS2 eingeführt. Vorsichtsmaßnahmen

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

Eine Lösung mit 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

Hier ist eine andere Lösung in der gleichen Weise wie bei der Lösung von Paulie_D , aber anstelle von Schlagschatten/Box-Schatten werde ich mich auf mehrere radiale Gradienten stützen, um jeden Kreis zu erzeugen. Dann können Sie leicht die Anzahl der Kreise, ihre Position, Farben und Größe steuern.

3 Kreise nach Bedarf

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 Kreise (und wir gehen zu beliebigen Zahlen)

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