Wie wird eine Nummer vor einem HTML H2 mit CSS vorangestellt?

Question

Ich versuche, ein schönes zu schaffen suchen H2 in HTML und CSS Überschrift, die mir eine nette formatiert Nummer vor der eigentlichen Überschrift Text haben können, wie im folgenden Bild gezeigt:

Das Beispiel im Bild verwendet einen CSS-Code wie folgt und es funktioniert gut, außer dass ich den Zahlenwert nicht in den orangefarbenen Kreis im HTML einstellen kann!

h2:before { 
 
    content: "2"; 
 
    text-align: center; 
 
    position: relative; 
 
    display: inline-block; 
 
    margin-right: 0.6em; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    -ms-border-radius: 50%; 
 
    -o-border-radius: 50%; 
 
    border-radius: 50%; 
 
    width: 1.6em; 
 
    height: 1.6em; 
 
    font-weight: 900; 
 
    line-height: 1.6; 
 
    color: #FFF; 
 
    font-size: 1em; 
 
    background: #F77621; 
 
}

<h2>How to Get Detailed PPC Keyword Data</h2>

Mein anderer Versuch ist, die h2 und eine span sowohl innerhalb eines div zu wickeln. Die Spanne ist, die die Nummer Kreis:

.number-circles { 
 
    margin-bottom: 0.4em; 
 
} 
 
.number-circles h2 { 
 
    display: inline-block; 
 
    font-size: 1.5em; 
 
    text-transform: capitalize; 
 
    line-height: 1.75em; 
 
    color: #555; 
 
} 
 
.number-circles span.num { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin-right: 0.6em; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    -ms-border-radius: 50%; 
 
    -o-border-radius: 50%; 
 
    border-radius: 50%; 
 
    width: 1.6em; 
 
    height: 1.6em; 
 
    font-weight: 900; 
 
    line-height: 1.6; 
 
    text-align: center; 
 
    color: #FFF; 
 
    font-size: 1em; 
 
    background: #F77621; 
 
} 
 
/* added to show the issue */ 
 
.number-circles { 
 
    max-width: 15em; 
 
}

<div class="number-circles"> 
 
    <span class="num">2</span> 
 
    <h2>How to Get Detailed PPC Keyword Data</h2> 
 
</div>

Mit diesem Ansatz kann ich den Wert für die Anzahl der HTML gesetzt. Das Problem, das ich habe, ist, wenn der h2 Text für eine einzelne Linie zu breit ist, dann macht es das Ganze zu einer neuen Linie gehen und bleibt nicht auf der Linie mit der Kreisnummerspanne. Das ist schlecht! Siehe Bild:

---

mir jemand eine gute Lösung helfen kann, die wie die ersten verhalten, wo ein großer h2 Text neben meine Nummer Spanne bleiben?

Answer 1

... es funktioniert super, außer dass ich den Zahlenwert in dem orange Kreis in der HTML nicht einstellen!

können Sie verwenden CSS pseudo elements und HTML5 Datenattribute:

h2:before { 
 
    content: attr(data-number); 
 
    display: inline-block; 
 
    /* customize below */ 
 
    font-size: 1em; 
 
    margin-right: 0.6em; 
 
    width: 1.6em; 
 
    line-height: 1.6em; 
 
    text-align: center; 
 
    border-radius: 50%; 
 
    color: #FFF; 
 
    background: #F77621; 
 
}

<h2 data-number="2">Heading</h2>

Es ist auch möglich, die Anzahl innerhalb einer Spanne zu wickeln und es in der Überschrift zu platzieren. Dies macht die Nummer für Suchmaschinen sichtbar. Das CSS bleibt dasselbe, außer dass Sie die Inhaltseigenschaft nicht benötigen.

---

nur daran erinnert, dass Sie CSS2 counters verwenden können, wenn Sie wollen einfach Ihre Positionen nummerieren:

.use-counter { 
 
    counter-reset: foo 0; 
 
} 
 
.count-this:before { 
 
    counter-increment: foo 1; 
 
    content: counter(foo) "."; 
 
    display: inline-block; 
 
    /* customize below */ 
 
    font-size: 1em; 
 
    margin-right: 0.6em; 
 
    width: 1.6em; 
 
    line-height: 1.6em; 
 
    text-align: center; 
 
    border-radius: 50%; 
 
    color: #FFF; 
 
    background: #F77621; 
 
}

<section class="use-counter"> 
 
    <h1>Lorem ipsum dolor sit amet</h1> 
 
    <h2 class="count-this">Fusce sed nunc eget sem euismod</h2> 
 
    <h2 class="count-this">In vel libero in nibh finibus finibus</h2> 
 
    <h2 class="count-this">Nam eleifend nulla ut placerat interdum</h2> 
 
</section> 
 
<section class="use-counter"> 
 
    <h1>Aenean ac urna id sapien</h1> 
 
    <h2 class="count-this">Nulla molestie nunc non ultrices</h2> 
 
    <h2 class="count-this">Nam eleifend nulla ut placerat interdum</h2> 
 
    <h2 class="count-this">Curabitur eget sapien tempor arcu</h2> 
 
</section>

Answer 2

Machen Sie einfach die Nummer und die h2 Inline-Block Elemente.

.number-circles .num { 
 
     content: "2"; 
 
     text-align: center; 
 
     position: relative; 
 
     display: inline-block; 
 
     margin-right: 0.6em; 
 
     -webkit-border-radius: 50%; 
 
     -moz-border-radius: 50%; 
 
     -ms-border-radius: 50%; 
 
     -o-border-radius: 50%; 
 
     border-radius: 50%; 
 
     width: 1.6em; 
 
     height: 1.6em; 
 
     font-weight: 900; 
 
     line-height: 1.6; 
 
     color: #FFF; 
 
     font-size: 1em; 
 
     background: #F77621; 
 
    } 
 

 
    .number-circles h2 { 
 
     display: inline-block; 
 
    }

<div class="number-circles"> 
 
    <span class="num">2</span> 
 
    <h2>How to Get Detailed PPC Keyword Data</h2> 
 
</div>

Answer 3

die span innerhalb des h2 Setzen und Sie können es bearbeiten, wie Sie wollen Verwenden von jQuery oder reinem JS.

jsFiddle

HTML: <h2><span class="number">2</span>How to Get Detailed PPC Keyword Data</h2>

CSS:

h2 span.number { 
    color:white; 
    background:orange; 
    border-radius:50%; 
    padding:4px 12px; 
    margin-right: 10px; 
    /* or whatever you want to do with your badge */ 
} 

Falls Sie sich fragen: Diese 100% gültig ist, span ist ein Inline-Element und kann überall eingesetzt werden Sie wollen und Es wird Ihren normalen Textfluss nicht stören.