Chỉnh sửa độ dày dòng của thuộc tính CSS 'underline'

Vì bạn có thể gạch dưới bất kỳ văn bản nào trong CSS như vậy:

H4 {text-decoration: underline;}

Làm thế nào bạn cũng có thể chỉnh sửa 'đường' được vẽ đó, màu bạn nhận được trên đường dễ dàng được chỉ định là 'màu: đỏ' nhưng làm cách nào để chỉnh sửa chiều cao của đường, tức là độ dày?

Đây là một cách để đạt được điều này:

HTML:

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

CSS:

 u {
    text-decoration: none;
    border-bottom: 10px solid black;
  }​

Đây là một ví dụ: http://jsfiddle.net/AQ9rL/

Gần đây, tôi đã phải đối phó với FF mà gạch dưới quá dày và quá xa so với văn bản trong FF, và tìm ra cách tốt hơn để xử lý nó bằng cách sử dụng một cặp bóng hộp:

.custom-underline{
    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

Bóng đầu tiên được đặt trên bóng thứ hai và đó là cách bạn có thể kiểm soát bóng thứ hai bằng cách thay đổi giá trị 'px' của cả hai.

Thêm vào đó: nhiều màu sắc, độ dày và vị trí gạch chân

Điểm trừ: không thể sử dụng trên nền không rắn

Ở đây tôi đã làm một vài ví dụ: http://jsfiddle.net/xsL6rktx/

Rất dễ dàng ... phần tử "span" bên ngoài với phông chữ nhỏ và gạch dưới, và phần tử "phông chữ" bên trong với kích thước phông chữ lớn hơn.

<span style="font-size:1em;text-decoration:underline;">
 <span style="font-size:1.5em;">
   Text with big font size and thin underline
 </span>
</span>

Một cách khác để làm điều này là sử dụng ": after" (phần tử giả) trên phần tử bạn muốn gạch dưới.

h2{
  position:relative;
  display:inline-block;
  font-weight:700;
  font-family:arial,sans-serif;
  text-transform:uppercase;
  font-size:3em;
}
h2:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  background:#000;
  height:1px;

}

Hiện text-decoration-thicknesstại có một phần của Mô-đun trang trí văn bản CSS cấp độ 4 . Đó là ở giai đoạn "Bản nháp của người biên tập" - vì vậy đây là một công việc đang được tiến hành và có thể thay đổi. Kể từ tháng 1 năm 2020, nó chỉ được hỗ trợ trong Firefox và Safari .

Thuộc tính CSS text-decoration-width đặt độ dày hoặc chiều rộng của đường trang trí được sử dụng trên văn bản trong một phần tử, chẳng hạn như dòng kẻ, gạch dưới hoặc gạch ngang.

a {
  text-decoration-thickness: 2px;
}

Codepen: https://codepen.io/mrotaru/pen/yLyLOgr (chỉ dành cho Firefox)

Ngoài ra còn có text-decoration-color, là một phần của Mô-đun trang trí văn bản CSS cấp độ 3 . Điều này dành cho người lớn hơn (Đề xuất ứng viên) và được hỗ trợ trong hầu hết các trình duyệt chính (ngoại lệ là Edge và IE). Tất nhiên nó không thể được sử dụng để thay đổi độ dày của dòng, nhưng có thể được sử dụng để tạo ra một gạch dưới "tắt tiếng" hơn (cũng được hiển thị trong codepen).

Tôi sẽ làm một việc đơn giản như:

.thickness-underline {
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid black;
    margin-bottom: -1px;
}

• Bạn có thể sử dụng line-heighthoặcpadding-bottom thiết lập quyền sở hữu giữa chúng
• Bạn có thể sử dụng display: inlinetrong một số trường hợp

Demo: http://jsfiddle.net/5580pqe8/

Cũng background-imagecó thể được sử dụng để tạo một gạch dưới.

Nó phải được chuyển xuống dưới background-positionvà lặp lại theo chiều ngang. Chiều rộng dòng có thể được điều chỉnh ở một mức độ nào đó bằng cách sử dụng background-size(nền được giới hạn trong hộp nội dung của phần tử).

.underline
{
    --color: green;
    font-size: 40px;
    background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
    background-repeat: repeat-x;
    background-position: 0 1.05em;
    background-size: 2px 5px;
}

<span class="underline">
     Underlined<br/>
     Text
</span>

a {
  text-decoration: none;
  position: relative;
}

a.underline {
  text-decoration: underline;
}

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

<h1><a href="#" class="underline">Default: some text alpha gamma<br>the quick brown fox</a></h1>
<p>Working:</p>
<h1><a href="#" class="shadow">Using Shadow: some text alpha gamma<br>the quick brown fox<br>even works with<br>multiple lines</a></h1>
<br>

Giải pháp cuối cùng: http://codepen.io/vikrant-icd/pen/gwNqoM

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

Nhờ sự kỳ diệu của các tùy chọn css mới, điều này hiện có thể thực hiện được:

a {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
}

Cho đến nay, hỗ trợ là tương đối kém . Nhưng cuối cùng nó sẽ hạ cánh trên các trình duyệt khác ngoài ff.

Giải pháp của tôi: https://codepen.io/SOLESHOE/pen/QqJXYj

{
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 0;
    line-height: 70%;
}

Bạn có thể điều chỉnh vị trí gạch chân với giá trị chiều cao dòng, độ dày gạch dưới và kiểu với đường viền dưới cùng.

Hãy cẩn thận để tắt hành vi gạch chân mặc định nếu bạn muốn gạch dưới một href.