Hướng dẫn how do you put a line under text in css? - làm thế nào để bạn đặt một dòng dưới văn bản trong css?

Bạn có thể sử dụng Border-Bottom với một số Padding-Bottom.

a {
border-bottom: 1px solid black;
padding-bottom: 5px;
}
Example Text

Ngoài ra, bạn có thể sử dụng phần tử giả, sử dụng sau hoặc trước để thêm một dòng dưới văn bản hoặc bất cứ thứ gì khác.pseudo element, use after or before to add a line under the text or anything else.

a::after {
 display: block;
   content: '';
  width: 100%;
  height: 1px;
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
}

a {
position: relative;  
}
Example Text

Đã trả lời ngày 9 tháng 2 năm 2016 lúc 6:48Feb 9, 2016 at 6:48

Hướng dẫn how do you put a line under text in css? - làm thế nào để bạn đặt một dòng dưới văn bản trong css?

border-bottom::

span{
  border-bottom:1px solid #000;
}
What we do

Đã trả lời ngày 9 tháng 2 năm 2016 lúc 6:46Feb 9, 2016 at 6:46

ManwalmanwalManwal

23.2K12 Huy hiệu vàng60 Huy hiệu bạc91 Huy hiệu Đồng12 gold badges60 silver badges91 bronze badges

0

Hướng dẫn how do you put a line under text in css? - làm thế nào để bạn đặt một dòng dưới văn bản trong css?

Trong thiết kế web tổng thể, phong cách dễ nhận biết nhất vẫn là văn bản màu xanh được gạch chân, điều này chắc chắn sẽ đưa bạn đi đâu đó. Phần tử liên kết có kiểu dáng đó theo mặc định và nó là màu duy nhất trong chế độ mặc định. Vì vậy, chúng ta nên tôn trọng nó.blue text underlined, which is certainly going to take you somewhere. Link element has that styling by default and it’s the only color in default mode. So we should be respectful of it.

Mặc dù, có một thế giới mới bên ngoài và những thứ cũ được cải thiện trong ít nhất một vài giai đoạn. Các yếu tố liên kết aren không cần thiết được gạch chân nữa và dòng dưới văn bản không chỉ là một nhận dạng liên kết ngày hôm nay. Khóa học nhanh này chủ yếu là về tùy chọn CSS trang trí văn bản và các tùy chọn liên kết trên mạng.text-decoration CSS option and “linked” options.

Đầu tiên là điều đầu tiên - nếu bạn cần gạch chân nhanh, đơn giản, thường xuyên, luôn có yếu tố HTML cho nó. Nó sẽ tạo dòng trong màu văn bản trên vị trí mặc định từ văn bản. Trên thực tế, phần tử chỉ đơn giản là thêm trang trí văn bản: gạch chân vào văn bản với CSS tích hợp của trình duyệt.HTML element for it. It is going to make line in the text color on default position from the text. In fact, the element is simply adding text-decoration:underline to the text with the browser's built-in CSS.

Hướng dẫn how do you put a line under text in css? - làm thế nào để bạn đặt một dòng dưới văn bản trong css?

OK, làm thế nào bạn có thể không cần điều đó, các ví dụ sau đây bao gồm các giải pháp CSS và chắc chắn giải pháp cho vấn đề của bạn.

Có hai tùy chọn chính để thêm dòng bên dưới văn bản với CSS. Cái đầu tiên là thuộc tính trang trí văn bản và nó chỉ định trang trí được thêm vào văn bản. Các giá trị có thể cho thuộc tính này là gạch chân, liên kết và dòng thông qua. Thuộc tính trang trí văn bản phải là thuộc tính tốc ký cho trang trí văn bản, trang trí văn bản và kiểu trang trí văn bản, nhưng điều này chưa được hỗ trợ tốt. Hiện tại, chúng tôi có trang trí văn bản và với nó, chúng tôi có thể thêm dòng dưới, qua hoặc thông qua văn bản, với màu sắc trang trí văn bản, chúng tôi có thể tô màu dòng đó và với kiểu trang trí văn bản, chúng tôi có thể làm cho nó gấp đôi, chấm, chấm, chấm, chấm, chấm, chấm, chấm, chấm, chấm, chấm, chấm, chấm, chấm, chấm, chấm lao đi hoặc lượn sóng.
The first one is text-decoration property and it specifies the decoration added to the text. Possible values for this property are underline, overline and line-through. The text-decoration property should be shorthand property for text-decoration-line, text-decoration-color, and text-decoration-style, but this isn’t supported well yet. For now, we have text-decoration and with it, we can add line under, over or through text, with text-decoration-color we can color that line and with text-decoration-style, we can make it double, dotted, dashed or wavy.

Hướng dẫn how do you put a line under text in css? - làm thế nào để bạn đặt một dòng dưới văn bản trong css?

Hướng dẫn how do you put a line under text in css? - làm thế nào để bạn đặt một dòng dưới văn bản trong css?

Hướng dẫn how do you put a line under text in css? - làm thế nào để bạn đặt một dòng dưới văn bản trong css?

Hướng dẫn how do you put a line under text in css? - làm thế nào để bạn đặt một dòng dưới văn bản trong css?

Giải pháp thứ hai là một loại hack và nó ngụ ý việc sử dụng một đáy biên. Thuộc tính hiển thị, trong trường hợp này, phải được nội tuyến. Với giải pháp này, chúng ta có thể kiểm soát vị trí của dòng với một thuộc tính đáy đệm, độ dày của đường dây có chiều rộng đáy biên, phong cách với kiểu đáy đường viền và màu sắc với màu đáy đường viền. Phong cách Border-Bottom có ​​các tùy chọn tương tự như phong cách trang trí văn bản và một số tùy chọn hiệu ứng 3D. Tùy chọn này cung cấp nhiều tùy chọn và biến hơn nhưng nó khó sử dụng hơn.border-bottom. The display property, in this case, must be inline. With this solution we can control the position of the line with a padding-bottom property, thickness of the line with border-bottom-width, style with border-bottom-style and color with border-bottom-color. Border-bottom-style has same options like text-decoration-style has and some 3D effect options. This option offers more options and variables but it’s a trickier for usage.

Hướng dẫn how do you put a line under text in css? - làm thế nào để bạn đặt một dòng dưới văn bản trong css?

Nó vẫn không thể làm cho gạch chân gợn sóng chấm chấm. Chờ nó :(

Bài đăng này ban đầu được xuất bản tại Blog Kolosek.