Làm thế nào để tạo gạch chân kép, gạch chân chấm cho văn bản trong css

Question

Làm thế nào chúng ta có thể tạo gạch chân kép chấm trong CSS? Tôi sử dụng thuộc tính ở dưới cùng.

border-bottom: 1px dotted #oof

Nhưng chỉ gạch dưới một chấm xuất hiện. Làm thế nào chúng ta có thể tạo đôi gạch dưới? Có thể không?

Answer 1

Bạn cần phải sử dụng ít nhất hai yếu tố HTML để đạt được điều này:

<span class="outer"> 
    <span class="inner">Your text here.</span> 
</span> 

Cả .outer và .inner nên có biên giới phía dưới rải rác giống nhau, nhưng .outer nên có một vài điểm ảnh của padding-bottom là tốt.

See an example here.

Answer 2

Hãy thử thêm một div rất mỏng bên dưới nó và đặt đường viền trên cùng hoặc đường viền dưới cùng 1px nằm rải rác. Sau đó, bạn có thể chơi với CSS cho phù hợp để làm cho nó phù hợp và làm cho đường chấm chấm đôi mà bạn muốn.

Và không thể làm điều đó trên cùng một yếu tố bạn sẽ phải làm điều đó từ bên ngoài.

Answer 3

Để tiết kiệm cho mình bằng cách sử dụng đánh dấu phụ, bạn có thể áp dụng đường viền bổ sung bằng cách sử dụng phần tử giả 'sau'. Kiểm tra các fiddle! - http://jsfiddle.net/sg2My/38/

.elem { 
    border-bottom:1px dotted #f00; 
    /* padding-bottom:1px;*/ 
    position:relative; 
} 

.elem:after { 
    border-bottom:1px dotted #000; 
    content:''; 
    left:0; 
    position:absolute; 
    bottom:-3px; 
    width:100%; 
} 

Ngoài ra, có thể là giá trị kiểm tra bài viết Chris Coyiers trên trình duyệt hỗ trợ - http://css-tricks.com/9189-browser-support-pseudo-elements/

Answer 4

Chắc chắn không cần hai yếu tố để làm điều này ...

.doubleUnderline{ 
    border-bottom: 3px double; 
}