Cách tăng khoảng cách giữa văn bản và gạch chân trong CSS

306

Sử dụng CSS, khi văn bản đã text-decoration:underlineđược áp dụng, có thể tăng khoảng cách giữa văn bản và gạch chân không?

css  underline 
— tối đa
nguồn
1
Đây không phải là chính xác những gì bạn đã yêu cầu, nhưng nó là một bài đọc thú vị về chủ đề: Thiết kế CSS: Gạch chân tùy chỉnh
— Peter Rowell
Khoảng cách được xác định bởi một phông chữ được sử dụng. Hãy thử phông chữ an toàn trên web.
— Alexei Danchenkov
1
CSS3 có rất nhiều thuộc tính trang trí văn bản mới hiện nay. Vui lòng kiểm tra alligator.io/css/text-decoration Ví dụ: text-underline-position: under;và text-decoration-skip: ink;Xin lưu ý rằng điều này có thể không tương thích ngược với các trình duyệt cũ hơn.
— sô cô la
1
— w3spi
1
Bình chọn text-underline-offsettại đây: bug.chromium.org/p/chromium/issues/ từ
— Mark Fisher

Câu trả lời:

356

Không, nhưng bạn có thể đi với một cái gì đó như border-bottom: 1px solid #000và padding-bottom: 3px.

Nếu bạn muốn cùng màu của "gạch chân" (trong ví dụ của tôi là đường viền), bạn chỉ cần bỏ qua phần khai báo màu, nghĩa là border-bottom-width: 1pxvàborder-bottom-style: solid .

Đối với multiline, bạn có thể gói bạn các văn bản multiline trong một khoảng bên trong phần tử. Ví dụ, <a href="#"><span>insert multiline texts here</span></a>sau đó chỉ cần thêm border-bottomvà paddingtrên <span>- Demo

— chelmertz
nguồn
3
Vấn đề duy nhất của tôi với thủ thuật này là khi tôi đang sử dụng chiều cao dòng bằng chiều cao div và sau đó là dọc-align: middle; để làm cho nó tập trung, sau đó tôi không thể sử dụng thủ thuật này bởi vì sau đó phần gạch chân kết thúc bên dưới div.
— deweydb
@deweydb: Làm thế nào về việc thêm phần đệm dưới cùng vào div container? jsfiddle.net/dYfjc/1
— chelmertz
+1 Tôi không biết về việc loại bỏ thuộc tính màu để kế thừa màu của phông chữ - điều đó sẽ tiết kiệm nhiều mồ hôi và nước mắt trong tương lai!
— Larry
9
Tôi khá không chắc tại sao câu trả lời này có rất nhiều upvote. Điều này không hoàn toàn làm việc với các văn bản nhiều dòng.
3
Đối với multiline, bạn có thể gói bạn các văn bản multiline trong một khoảng bên trong phần tử. Ví dụ, <a href="#"><span>insert multiline texts here</span></a>sau đó chỉ cần thêm đường viền dưới và đệm trên <span>. jsfiddle.net/Aishaterr/vrpb2ey7/1
— Daniel Hernandez
133

Cập nhật 2019: Nhóm làm việc CSS đã xuất bản một bản nháp cho trang trí văn bản cấp 4 sẽ thêm một thuộc tính mới text-underline-offset(cũng như text-decoration-thickness) để cho phép kiểm soát vị trí chính xác của phần gạch chân. Theo văn bản này, đây là một bản nháp giai đoạn đầu và chưa được thực hiện bởi bất kỳ trình duyệt nào, nhưng có vẻ như cuối cùng nó sẽ làm cho kỹ thuật dưới đây trở nên lỗi thời.

Câu trả lời gốc dưới đây.

Vấn đề với việc sử dụng border-bottomtrực tiếp là ngay cả với padding-bottom: 0, dấu gạch chân có xu hướng quá xa đi từ văn bản để nhìn tốt. Vì vậy, chúng tôi vẫn không có quyền kiểm soát hoàn toàn.

Một giải pháp mang lại cho bạn độ chính xác pixel là sử dụng :afterphần tử giả:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: '';

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

Bằng cách thay đổi thuộc bottomtính (số âm là tốt), bạn có thể định vị gạch chân chính xác nơi bạn muốn.

Một vấn đề với kỹ thuật này là hãy cẩn thận là nó hoạt động hơi kỳ lạ với các đường bao.

— con cuối cùng
nguồn
2
Điều này sẽ không làm việc cho vấn đề cụ thể của tôi, nhưng đây là một mẹo tuyệt vời. +1
11
Làm việc tốt, nhưng điều này sẽ không hiệu quả đối với các mỏ neo trải dài trên nhiều dòng
— Willster
@ last-child Cái này tốt hơn gạch chân, nhưng với văn bản bao bọc thì điều này sẽ không hoạt động cho mọi dòng
— Nishantha
Một vấn đề là đáy biên giới và gạch chân là hai thứ khác nhau. Ví dụ, một phần của văn bản mở rộng dưới phần gạch chân. Nếu bạn định kiểu thẻ a làm nút, bạn không có quyền tự do sử dụng đường viền dưới làm gạch chân.
— Anders Lindén
10
Hãy tưởng tượng nói với ai đó là người mới phát triển web, nhà thiết kế đồ họa, người dùng trung bình hoặc mẹ của bạn, rằng đây là điều cần thiết để thêm một số không gian được kiểm soát giữa văn bản và nó gạch chân và họ sẽ tự hỏi bạn đang làm gì với cuộc sống của bạn .
— MarcGuay
79

Bạn có thể sử dụng cái này text-underline-position: under

Xem tại đây để biết thêm chi tiết: https://css-tricks.com/almanac/properIES/t/text-underline-poseition/

Xem thêm khả năng tương thích trình duyệt .

— Đức Huỳnh
nguồn
2
Cảm ơn! Nếu bạn đang cố gắng thực hiện một gạch chân gạch ngang và thấy rằng nó được vẽ mà không có khoảng trống giữa dưới cùng của văn bản và dòng, thì điều này sẽ khắc phục vấn đề.
— Jonathan Cross
6
Đây là câu trả lời chính xác cho các trình duyệt hiện đại mà không có bất kỳ cách giải quyết nào.
— Paras Shah
2
Nó không hoạt động trong Firefox, ngay cả với tiền tố của nhà cung cấp - nhưng nó nằm trong thông số W3C: w3.org/TR/css-text-decor-3/#text-underline-poseition-property . Tài nguyên có liên quan khác: quackit.com/css/css3/properIES/css bản
— underline
4
Tính đến thời điểm này, điều này chỉ thực sự hoạt động trong trình duyệt chrome và không phải là giải pháp cho các trình duyệt khác.
— miir
2
Chà, kể từ ngày bình luận này, tôi cũng thấy nó hoạt động trong Firefox .
— Jarad
15

Đây là những gì làm việc tốt cho tôi. 

<style type="text/css">
  #underline-gap {
    text-decoration: underline;
    text-underline-position: under;
  }
</style>
<body>
  <h1 id="underline-gap"><a href="https://Google.com">Google</a></h1>
</body>
Mở rộng đoạn trích

— Jordan Starrk
nguồn
2
Điều quan trọng cần lưu ý text-underline-positionlà không được hỗ trợ trong Firefox theo nhà phát
— triển.mozilla.org/en-US/docs/Web/CSS/ mẹo
Rất thú vị. Lời kêu gọi tuyệt vời Cảm ơn bạn!
— Jordan Starrk
Được hỗ trợ trong Firefox bắt đầu từ 74, theo cùng một liên kết.
— GSerg
11

Tìm hiểu chi tiết về phong cách hình ảnh của text-decoration:underlinekhá nhiều vô ích, vì vậy bạn sẽ phải thực hiện một số loại hack để loại bỏ text-decoration:underlinevà thay thế nó bằng một thứ khác cho đến khi phiên bản CSS xa xôi trong tương lai cho phép chúng ta kiểm soát nhiều hơn .

Điều này làm việc cho tôi:

   a {
    background-image: linear-gradient(
        180deg, rgba(0,0,0,0),
        rgba(0,0,0,0) 81%, 
        #222222 81.1%,
        #222222 85%,
        rgba(0,0,0,0) 85.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}
<a href="#">Lorem ipsum</a> dolor sit amet, <a href="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore.</a>
Mở rộng đoạn trích

  • Điều chỉnh các giá trị% (81% và 85%) để thay đổi khoảng cách từ dòng văn bản
  • Điều chỉnh chênh lệch giữa hai giá trị% để thay đổi độ dày đường
  • điều chỉnh các giá trị màu (# 222222) để thay đổi màu gạch chân
  • hoạt động với nhiều yếu tố nội tuyến
  • làm việc với bất kỳ nền tảng

Đây là phiên bản có tất cả các thuộc tính độc quyền để tương thích ngược:

a {     
    /* This code generated from: http://colorzilla.com/gradient-editor/ */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */

    text-decoration: none;
}

Cập nhật: phiên bản SASSY

Tôi đã làm một mixin scss cho việc này. Nếu bạn không sử dụng SASS, phiên bản thông thường ở trên vẫn hoạt động tuyệt vời ...

@mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) {
    background-image: linear-gradient(
        180deg, rgba(0,0,0,0),
        rgba(0,0,0,0) $top,
        $color $top + 0.1%,
        $color $bottom,
        rgba(0,0,0,0) $bottom + 0.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}

sau đó sử dụng nó như vậy:

$blue = #0054a6;
a {
    color: $blue;
    @include fake-underline(lighten($blue,20%));
}
a.thick {
    color: $blue;
    @include fake-underline(lighten($blue,40%), 86%, 99%);
}

Cập nhật 2: Mẹo về hậu duệ

Nếu bạn có một màu nền vững chắc, hãy thử thêm một màu mỏng text-strokehoặc text-shadowcùng màu với nền của bạn để làm cho hậu duệ trông đẹp.

tín dụng

Đây là phiên bản đơn giản hóa của kỹ thuật tôi tìm thấy ban đầu tại https://eager.io/app/smartunderline , nhưng bài viết đã bị gỡ xuống.

— squarecandy
nguồn
Thật không may, liên kết eager.io không hoạt động nữa. Bạn có nhớ những gì đã được hack để làm cho con cháu trông đẹp hơn?
— kano
1
@Kano - Tôi tin rằng nó đã sử dụng bóng văn bản có cùng màu với một nền tảng vững chắc.
— squarecandy
Ngoài ra, với kỹ thuật ở trên, bạn có thể đặt màu của gạch chân khác với văn bản, vì vậy đôi khi tôi đặt nó nhạt hơn văn bản, điều này làm cho sự va chạm với hậu duệ ít gặp vấn đề về khả năng đọc.
— squarecandy
7

Tôi biết đó là một câu hỏi cũ, nhưng đối với cài đặt văn bản một dòng display: inline-blockvà sau đó cài đặt, nó heightđã hoạt động tốt để tôi kiểm soát khoảng cách giữa một đường viền và văn bản.

— Đa Minh P
nguồn
1
Tôi không cần phải thiết lập chiều cao. Tôi chỉ gói nó trong một div khác và vì tôi muốn nó được đặt ở giữa, tôi chỉ cần đặt văn bản thẳng hàng trên div.
— Guy Lowe
6

@ câu trả lời cuối cùng của trẻ là một câu trả lời tuyệt vời!

Tuy nhiên, việc thêm đường viền vào H2 của tôi tạo ra một gạch chân dài hơn văn bản.

Nếu bạn tự động viết CSS của mình hoặc nếu như tôi may mắn và biết văn bản đó sẽ là gì, bạn có thể làm như sau:

  1. thay đổi contentthành một cái gì đó có độ dài phù hợp (nghĩa là giống nhau

  2. văn bản) đặt màu phông chữ thành transparent(hoặc rgba(0,0,0,0))

để gạch chân <h2>Processing</h2>(ví dụ), thay đổi mã của con cuối cùng thành:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: 'Processing';
    color: transparent;

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}
— Michael Greisman
nguồn
9
H2 là các thành phần khối có thể giải thích tại sao phần gạch chân dài hơn văn bản. Có lẽ display: inline-blocksẽ sửa nó. Thay thế văn bản bằng contenttrông giống như một hack có thể phá vỡ theo nhiều cách.
— đứa con cuối cùng
3

Xem fiddle của tôi .

Bạn sẽ cần sử dụng thuộc tính chiều rộng đường viền và thuộc tính đệm. Tôi đã thêm một số hình ảnh động để làm cho nó trông mát mẻ hơn:

body{
  background-color:lightgreen;
}
a{
  text-decoration:none;
  color:green;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  transition: all .2s ease-in;
}

a:hover{
  color:darkblue;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  padding:2px;
}
<a href='#' >Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><a href="#">what a wonder-ful world!</a> World!</i>
Mở rộng đoạn trích

— Stardust
nguồn
2

Một thay thế cho các văn bản hoặc liên kết đa dòng, bạn có thể bọc các văn bản của mình trong một khoảng bên trong một phần tử khối. 

<a href="#">
    <span>insert multiline texts here</span>
</a>

sau đó bạn chỉ có thể thêm đường viền dưới và đệm trên <span>.

a {
  width: 300px;
  display: block;
}

span {
  padding-bottom: 10px;
  border-bottom: 1px solid #0099d3;
  line-height: 48px;
}

Bạn có thể tham khảo câu đố này. https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

— Daniel Hernandez
nguồn
2

Nếu bạn muốn:

  • đa dòng
  • say mê
  • với đệm đáy tùy chỉnh
  • không có giấy gói

gạch chân, bạn có thể sử dụng hình ảnh chiều cao 1 pixel với repeat-xvà 100% 100%vị trí:

display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;

Bạn có thể thay thế cái thứ hai 100%bằng một cái gì đó khác như pxhoặc emđể điều chỉnh vị trí dọc của phần gạch chân. Ngoài ra, bạn có thể sử dụng calcnếu bạn muốn thêm phần đệm dọc, ví dụ:

padding-bottom: 5px;
background-position-y: calc(100% - 5px);

Tất nhiên, bạn cũng có thể tạo mẫu png base64 của riêng mình với màu sắc, chiều cao và thiết kế khác, ví dụ tại đây: http://www.potypeify.com/ - chỉ cần đặt chiều rộng và chiều cao hình vuông ở mức 2x1.

Nguồn cảm hứng: http://alistapart.com/article/customunderlines

— mcmimik
nguồn
1

Nếu bạn đang sử dụng text-decoration: underline;, thì bạn có thể thêm khoảng trắng giữa gạch chân và văn bản bằng cách sử dụngtext-underline-position: under;

Để biết thêm Các thuộc tính vị trí văn bản-gạch chân, bạn có thể xem tại đây

— Ifrah
nguồn
0

Tôi đã có thể làm điều đó bằng cách sử dụng U (Thẻ gạch chân)

u {
    text-decoration: none;
    position: relative;
}
u:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;
    border-width: 0 0 1px;
    border-style: solid;
}


<a href="" style="text-decoration:none">
    <div style="text-align: right; color: Red;">
        <u> Shop Now</u>
    </div>
</a>
— Arun Prasad ES
nguồn
0

Đây là những gì tôi sử dụng:

html:

<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>

css:

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }
— Constantinos Constantinou
nguồn
0

Những gì tôi sử dụng:

<span style="border-bottom: 1px solid black"> Enter text here </span>
— Đức Phanxicô
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.