Đường viền đôi với chỉ một phần tử

Question

Tôi đã cố gắng để có được một tiêu đề kép (gạch chân). Đầu tiên là chiều rộng đầy đủ, thứ hai chỉ là chiều rộng văn bản. Biên giới nên chồng chéo Có một giải pháp dễ dàng với hai yếu tố lồng nhau như thế:

<h1><span>Title</span></h1> 

và css:

h1 { 
    border-bottom: 1px solid red; 
} 

h1 span { 
    display: inline-block; 
    padding: 0 0 10px; 
    margin-bottom: -1px; 
    border-bottom: 1px solid blue; 
} 

Span có inline-block sở hữu màn hình để nó có chiều rộng đúng.

Tôi tự hỏi liệu có thể có được hiệu ứng tương tự với các bộ chọn :after, :before và chỉ h1 yếu tố.

Answer 1

Nó có thể được thực hiện. Tôi đã sử dụng vw đơn vị.

Hãy xem này Working Fiddle

HTML:

<h1 class="SpecialBorder">Title</h1> 

CSS:

* 
{ 
    margin: 0; 
    padding: 0; 
} 
.SpecialBorder 
{ 
    display: inline-block; 
    position: relative; 
} 
.SpecialBorder:before , .SpecialBorder:after 
{ 
    content:''; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
} 
.SpecialBorder:before 
{ 
    width: 100vw; 
    border-bottom: 1px solid red; 
} 
.SpecialBorder:after 
{ 
    width: 100%; 
    border-bottom: 1px solid blue; 
} 

Giải thích: các before & after các phần tử giả là các phần tử vẽ đường viền. cả hai đều là các phần tử trống. với chiều rộng nhất định làm cho đường viền của chúng hiển thị.

chúng hoàn toàn nằm ở cuối phụ huynh <h1> của chúng.

before: chịu trách nhiệm về đường viền màu đỏ. vì vậy chiều rộng của nó được đặt thành '100%' của chế độ xem. after: chịu trách nhiệm về đường viền màu đỏ. nên hes chiều rộng được thiết lập để 100% của cha mẹ mình (các <h1>), đó là lý do tại sao h1 được thiết lập để 'display: inline-block;"(vì vậy nó sẽ kéo dài ony cũng giống như nội dung của mình)

vw đơn vị được hỗ trợ bởi new browsers only.

lưu ý rằng nếu bạn không thể sử dụng vw đơn vị, bạn vẫn có thể làm quen với điều đó. xóa display:inline-block; từ h1 (gây ra nó để span tất cả các cách trở lại) thay đổi độ rộng của before-100% (để làm cho nó trải rộng tất cả các cách), thay đổi với các after một số giá trị cố định của sự lựa chọn của bạn.

Chỉnh sửa: như thgaskell được nêu trong bình luận thứ,

có một lỗi nơi vw đơn vị không cập nhật đúng trên webkit trình duyệt khi cửa sổ được thay đổi kích cỡ.

Chỉnh sửa 2: để làm yếu tố để hiển thị sau khi tiêu đề, bạn có thể sử dụng một thẻ <br />, hoặc thanh toán bù trừ các kỹ thuật như cho thấy here.

Answer 2

Tôi không chắc chắn nếu đó là những gì bạn muốn, nhưng bạn có thể làm những quy tắc:

h1 { 
    ... 
} 

/* here are the direct children of every h1 */ 
h1>* { 
    ... 
} 

::after và ::before selectors sẽ có ý nghĩa khi chèn nội dung mới (lưu ý các dấu hai chấm kép). Dưới đây là một số MDN trên ::after chọn và một số ví dụ:

https://developer.mozilla.org/en-US/docs/Web/CSS/::after