đường chấm trong Chrome

Question

Đối với một số lý do, khi sử dụng một phong cách biên giới rải rác để tạo ra một dòng, Chrome làm cho kết thúc như chấm đôi, trông khủng khiếp đặc biệt là trên các tuyến đường ngắn:

.text { 
 
    border-bottom: 2px dotted #000; 
 
}

<span class="text">Hi</span><br/> 
 
<span class="text">lll</span><br/> 
 
<span class="text">22</span><br/>

Ngay cả một cái gì đó đơn giản như border-bottom: 2px dotted #000; không hoạt động. Tôi thấy một số bài viết đề nghị thiết lập biên giới trái/phải để minh bạch, nhưng trông thậm chí còn tồi tệ hơn tại nó cắt đứt các góc nhỏ của các dấu chấm.

Dường như vẫn ổn trong Firefox. Có cách nào để làm cho nó trông tốt trong Chrome hay không, tôi có may mắn không?

Answer 1

Bạn hoàn toàn có thể định vị phần tử giả với thuộc tính đường viền và bù đắp vị trí theo chiều rộng "chấm" để ẩn dấu chấm đầu tiên và cuối cùng được hiển thị dưới dạng dấu chấm kép.

.text { 
 
    position: relative; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
} 
 

 
.text::after { 
 
    border-bottom: 2px dotted #000; 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; left: -2px; right: -2px; 
 
}

<span class="text">Hi</span><br/> 
 
<span class="text">lll</span><br/> 
 
<span class="text">22</span><br/>

Answer 2

Nếu bạn muốn thiết lập chỉ phía dưới biên giới, tại sao không thử text-decoration: underline,

sau đó đặt text-decoration kiểu: say mê

Xem này https://developer.mozilla.org/id/docs/Web/CSS/text-decoration-style