Làm cách nào để thêm một số trước một HTML H2 bằng CSS?

Question

tôi đang cố gắng để tạo ra một cái nhìn tốt đẹp H2 tiêu đề trong HTML và CSS mà sẽ cho phép tôi có một định dạng đẹp Số trước khi văn bản Tựa đề thực tế, như thể hiện trong hình dưới đây:

Ví dụ trong hình ảnh đang sử dụng mã CSS như thế này bên dưới và nó hoạt động tốt, ngoại trừ việc tôi không thể đặt giá trị số trong vòng tròn màu cam trong HTML!

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>

nỗ lực khác của tôi là để Quấn h2 và span cả trong một div. Tuổi đang nắm giữ vòng tròn số:

.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>

Với phương pháp này, tôi có thể thiết lập giá trị cho Number trong HTML. Vấn đề tôi gặp phải là khi văn bản h2 quá rộng đối với một dòng duy nhất, sau đó nó làm cho toàn bộ nội dung đi đến một dòng mới và không còn trên đường với khoảng số vòng tròn. Thật tệ! Xem hình ảnh:

---

Ai đó có thể giúp tôi với một giải pháp tốt mà cư xử như người đầu tiên, nơi một văn bản h2 rộng sẽ ở bên cạnh khoảng số của tôi?

Answer 1

... nó hoạt động tốt, ngoại trừ việc tôi không thể thiết lập giá trị số trong vòng tròn màu cam trong HTML!

Bạn có thể sử dụng CSS pseudo elements và các thuộc tính HTML5 dữ liệu:

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>

Nó cũng có thể quấn số bên trong một khoảng thời gian và đặt nó bên trong tiêu đề. Điều này làm cho số hiển thị với các công cụ tìm kiếm. CSS sẽ vẫn giữ nguyên trừ khi bạn không cần thuộc tính nội dung.

---

Chỉ cần nhớ rằng bạn có thể sử dụng CSS2 counters nếu bạn chỉ muốn đánh số tiêu đề của bạn:

.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

Chỉ cần tạo cả số và các phần tử khối nội tuyến h2.

.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

Đặt span bên trong h2 và bạn có thể chỉnh sửa nó tuy nhiên bạn muốn bằng cách sử dụng jQuery hoặc JS thuần túy.

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 */ 
} 

Trong trường hợp bạn đang tự hỏi: đây là 100% hợp lệ, span là một yếu tố nội tuyến và có thể được đặt bất cứ nơi nào bạn muốn và nó sẽ không làm phiền luồng văn bản thông thường của bạn.