Chiều dài gạch chân văn bản CSS

Để thiết kế liên kết hoặc tạo hoạt ảnh cho các nút menu, bạn có thể cần sử dụng gạch dưới. Từ bài viết này, bạn sẽ tìm hiểu về một số phương pháp tạo gạch dưới CSS. sử dụng các thuộc tính text-decoration, border-bottom, background-image, box-shadow hoặc thậm chí là SVG

Thuộc tính trang trí văn bản CSS

Thuộc tính text-decoration là cách đơn giản nhất để gạch chân văn bản. Tuy nhiên, vấn đề chính với trang trí văn bản là thiếu khả năng tùy chỉnh. Chúng ta sẽ xem thêm các ví dụ tùy chỉnh khác trong bài viết này.  

Bây giờ, hãy xem cách chúng ta có thể sử dụng text-decoration cho một gạch dưới CSS đơn giản

Thuộc tính text-decoration là thuộc tính tốc ký cho 3 thuộc tính khác

• text-decoration-line (bắt buộc). gạch chân, gạch chân, gạch dưới gạch chân, gạch đầu dòng
• văn bản-trang trí-phong cách. rắn, chấm, nét đứt, lượn sóng, gấp đôi
  
• văn bản-trang trí-màu sắc. ví dụ: #ccc, blue, currentColor hoặc inherit
  

Dưới đây là một số ví dụ

Để xóa gạch chân, chỉ cần sử dụng text-decoration. không ai

Nếu bạn chỉ muốn thêm gạch dưới CSS khi di chuột, hãy sử dụng các quy tắc CSS này

    
        
a { text-decoration: none; }
a:hover { text-decoration: underline; }
    

Một thay thế cho text-decoration là thuộc tính border-bottom. Với đường viền dưới cùng, bạn cũng có thể thêm phần đệm. Trong ví dụ bên dưới, liên kết đầu tiên được tạo bằng thuộc tính text-decoration và liên kết thứ hai có thuộc tính border-bottom

    
        
a:nth-of-type(1) {
  color: #32557f;
  text-decoration: underline #32557f dashed;
}

a:nth-of-type(2) {
  color: #32557f;
  text-decoration: none;
  border-bottom: 2px dashed #32557f;
  padding-bottom: 3px;
}
    

Bây giờ, hãy tập trung vào kiểu dáng đẹp hơn của phần gạch chân CSS

Đường gạch chân chuyển màu

Bạn có thể tạo một đường gạch dưới chuyển màu với nền. linear-gradient và một số thuộc tính nền khác. Đây là một ví dụ

    
        
background: linear-gradient(to left, #f69ec4, #f9dd94 100%);
background-position: 0 100%;
background-size: 100% 2px;
background-repeat: repeat-x;
    

Đọc thêm các mẹo về chuyển màu CSS trong CSS Gradients. 7 ví dụ về cách sử dụng

gạch chân ngắn

Gạch dưới CSS có thể có chiều rộng hoặc chiều cao bất kỳ — thậm chí ngắn hơn từ hoặc liên kết. Ví dụ: nếu bạn cần tạo một gạch chân ngắn để đánh dấu phần đầu của câu hoặc tiêu đề, hãy sử dụng. sau phần tử giả với thuộc tính border-bottom

    
        
Sharks are a group of elasmobranch fish characterized by a cartilaginous skeleton, five to seven gill slits on the sides of the head, and pectoral fins that are not fused to the head.
    

    
        
a::after {
  content: "";
  display: block;
  width: 32px;
  padding-top: 3px;
  border-bottom: 2px solid #f9dd94;
}
    

Bạn cũng có thể đặt độ dày của đường gạch dưới CSS (ví dụ: 2 px) bằng cách áp dụng border-bottom. 2px cố định #f9dd94;

Gạch dưới kiểu đánh dấu

Bạn có thể tạo một gạch dưới lệch ngắn với thuộc tính biến đổi

    
        
h1 {
  padding: 30px 0 8px;
  position: relative;
}

h1::before {
  content: "";
  position: absolute;
  left: 7%;
  bottom: 16px;
  width: 150px;
  height: 14px;
  transform: skew(-12deg) translateX(-50%);
  background: rgba(238,111,87,0.5);
  z-index: -1;
}
    

Hơn nữa, bạn có thể tạo gạch dưới kiểu đánh dấu cho một đoạn văn bản dài. Đây là một ví dụ lấy cảm hứng từ Codepen. io/Tro

phong cách chung

    
        
body {
  padding: 4rem;
}

.box {
  padding: 2rem;
  max-width: 14rem;
  background-color: #f2f2f2;
  border-radius: 4px;
  max-width: 50rem;
}
    

Kiểu gạch chân cụ thể

    
        
:root {
  /* The intrinsic width of the underline stroke (in pixels). This is 
   * the same as the height of the cap images. Don't specify the
   * units! This is because of some of the calculations we do later on. */
  --underline-intrinsic-width: 8;
  
  /* The actual width of the underline stroke we want to render (in pixels).
   * You can modify this, and the sizing and positioning should be calculated
   * accordingly. Again, Don't specify the units! */
  --underline-width: 12;
  
  /* The color used to draw the underline. It should match the color
   * used in the cap images.. unfortunately we can't modify the SVG
   * fill via CSS because it's a background image. */
  --underline-color: #f1a1e3;
  
  /* We need to know the width of the cap images so that we
   * can position everything on the x axis accordingly. */
  --underline-cap-width: 4px;
  
  /* The border is positioned relative to the bottom of the line.
   * We can move it upwards a little to create an overlap effect. */
  --underline-offset-y: -2px;
  
  /* The padding to add to the x axis. By default, the caps would be
   * aligned with the beginning and end of the line. */
  --underline-padding-x: 0.12em;
}
  
.text {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  color: #32557f;
  background-image:
    linear-gradient(180deg, var(--underline-color), var(--underline-color)),
    var(--cap-image-left),
    var(--cap-image-right);
  background-position-x:
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
    0,
    100%;
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
  background-size:
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
	auto calc(var(--underline-width) * 1px);
	
  font-size: 3rem;
  font-weight: bold;
  --underline-width: 20;
  --underline-offset-y: -2px;
  /* The cap images to use that form the left and right shape.*/
  --cap-image-left: url(https://files-6lc03kjqt.now.sh/left-2.svg);
  --cap-image-right: url(https://files-e7gkh52mq.now.sh/right-2.svg);
}
    

Cách gạch chân tiêu đề trong CSS

Để gạch dưới tiêu đề, bạn có thể sử dụng text-decoration. gạch dưới; . Tuy nhiên, trong trường hợp sau, bạn cần thêm màn hình. nội tuyến;

________số 8_______

Gạch chân tùy chỉnh nhiều dòng

Bây giờ, giả sử, chúng tôi muốn tạo một gạch chân trải dài trên một số dòng văn bản. Không phải tất cả các phương pháp sẽ hoạt động cho việc này

Trong hai ví dụ dưới đây, chúng tôi sẽ sử dụng hình nền vì nó cho phép kéo dài nhiều dòng. Mặc dù bạn có thể sử dụng một hình ảnh thực tế, nhưng đây chỉ là một đường thẳng, vì vậy chúng tôi sử dụng một gradient tuyến tính sẽ tạo ra một hình ảnh

    
        
Sharks are a group of elasmobranch fish characterized by a cartilaginous skeleton, five to seven gill slits on the sides of the head, and pectoral fins that are not fused to the head.
    

    
        
a:nth-of-type(1) {
  color: #32557f;
  text-decoration: underline #32557f dashed;
}

a:nth-of-type(2) {
  color: #32557f;
  text-decoration: none;
  border-bottom: 2px dashed #32557f;
  padding-bottom: 3px;
}
    

0

Bối cảnh Lặp lại. lặp lại-x;

Bạn có thể thay đổi giá trị thứ hai ở vị trí nền. 0 100%;

Bạn cũng có thể thay đổi giá trị thứ hai trong kích thước nền. 100% 3px;

Chúng tôi cũng có thể tạo một gạch dưới nhiều dòng hoạt hình chỉ được hiển thị khi di chuột

Đây là đánh dấu

    
        
a:nth-of-type(1) {
  color: #32557f;
  text-decoration: underline #32557f dashed;
}

a:nth-of-type(2) {
  color: #32557f;
  text-decoration: none;
  border-bottom: 2px dashed #32557f;
  padding-bottom: 3px;
}
    

1

1. Đầu tiên, xóa trang trí văn bản mặc định

2. Sử dụng hình nền vì nó cho phép kéo dài nhiều dòng. Vì chúng tôi muốn phần gạch chân có cùng màu với liên kết, chúng tôi sử dụng màu hiện tại cho cả phần đầu và phần cuối của dải màu. currentColor yêu cầu trình duyệt sử dụng màu của phần tử từ thuộc tính màu chính

3. Sử dụng vị trí nền để đặt vị trí của hình ảnh ở góc dưới bên trái. Trong ví dụ của chúng tôi, 0% liên quan đến vị trí nằm ngang và 100% cho vị trí dọc. Ngoài ra, hãy tắt lặp lại nền để ngăn nhiều phiên bản của hình ảnh được tạo. Bạn có thể sử dụng cách viết tắt cho hai thuộc tính này (nền. không lặp lại 0 100%;)

4. Sử dụng kích thước nền để chỉ định chiều rộng bằng 0 và chiều cao 2 px. Chiều rộng bằng không có nghĩa là gạch dưới sẽ chỉ xuất hiện khi di chuột. Nếu không, nó sẽ không được nhìn thấy

5. Đặt quá trình chuyển đổi thành kích thước nền, để thay đổi mất 0. 3 giây

6. Khi di chuột qua liên kết, chúng tôi thay đổi độ rộng của hình ảnh thành 100% tạo ra một gạch chân đầy đủ và quá trình chuyển đổi cung cấp hoạt ảnh

Đây là mã đầy đủ

    
        
a:nth-of-type(1) {
  color: #32557f;
  text-decoration: underline #32557f dashed;
}

a:nth-of-type(2) {
  color: #32557f;
  text-decoration: none;
  border-bottom: 2px dashed #32557f;
  padding-bottom: 3px;
}
    

2

Sử dụng hình ảnh làm gạch chân CSS

Bạn cũng có thể sử dụng hình ảnh thực tế (e. g. SVG hoặc PNG) để tạo kiểu gạch chân CSS. Dưới đây là một vài ví dụ lấy cảm hứng từ John D. CodePen của Jameson

Gạch dưới CSS hình ngôi sao

    
        
a:nth-of-type(1) {
  color: #32557f;
  text-decoration: underline #32557f dashed;
}

a:nth-of-type(2) {
  color: #32557f;
  text-decoration: none;
  border-bottom: 2px dashed #32557f;
  padding-bottom: 3px;
}
    

3

gạch dưới hình trái tim

    
        
a:nth-of-type(1) {
  color: #32557f;
  text-decoration: underline #32557f dashed;
}

a:nth-of-type(2) {
  color: #32557f;
  text-decoration: none;
  border-bottom: 2px dashed #32557f;
  padding-bottom: 3px;
}
    

4

Đọc thêm về hình nền. Nền CSS

Gạch chân hoạt hình trên Hover

Bây giờ, hãy tạo một đường gạch dưới hoạt hình của các nút menu khi di chuột. Chúng tôi sẽ cần đánh dấu này

    
        
a:nth-of-type(1) {
  color: #32557f;
  text-decoration: underline #32557f dashed;
}

a:nth-of-type(2) {
  color: #32557f;
  text-decoration: none;
  border-bottom: 2px dashed #32557f;
  padding-bottom: 3px;
}
    

5

Dưới đây là các phong cách phổ biến cho 4 ví dụ sẽ theo sau

    
        
a:nth-of-type(1) {
  color: #32557f;
  text-decoration: underline #32557f dashed;
}

a:nth-of-type(2) {
  color: #32557f;
  text-decoration: none;
  border-bottom: 2px dashed #32557f;
  padding-bottom: 3px;
}
    

6

Chúng tôi sẽ xóa trang trí văn bản tiêu chuẩn và thêm đường viền bằng các phần tử giả CSS. Đường viền này sau đó sẽ được làm động với các thuộc tính chuyển tiếp CSS

Gạch chân hoạt hình khi di chuột #1

    
        
a:nth-of-type(1) {
  color: #32557f;
  text-decoration: underline #32557f dashed;
}

a:nth-of-type(2) {
  color: #32557f;
  text-decoration: none;
  border-bottom: 2px dashed #32557f;
  padding-bottom: 3px;
}
    

7

Gạch chân hoạt hình khi di chuột #2

    
        
a:nth-of-type(1) {
  color: #32557f;
  text-decoration: underline #32557f dashed;
}

a:nth-of-type(2) {
  color: #32557f;
  text-decoration: none;
  border-bottom: 2px dashed #32557f;
  padding-bottom: 3px;
}
    

8

Gạch chân hoạt hình khi di chuột #3

    
        
a:nth-of-type(1) {
  color: #32557f;
  text-decoration: underline #32557f dashed;
}

a:nth-of-type(2) {
  color: #32557f;
  text-decoration: none;
  border-bottom: 2px dashed #32557f;
  padding-bottom: 3px;
}
    

9

Gạch chân hoạt hình khi di chuột #4

    
        
background: linear-gradient(to left, #f69ec4, #f9dd94 100%);
background-position: 0 100%;
background-size: 100% 2px;
background-repeat: repeat-x;
    

0

Đọc thêm các mẹo về tạo kiểu menu. Cách tạo thanh điều hướng. 6 thủ thuật hữu ích

Gạch chân hoạt hình với thuộc tính box-shadow

Bạn cũng có thể tạo gạch chân bằng thuộc tính box-shadow để gắn bóng vào phần tử HTML. Bạn có thể làm cho bóng này lớn hơn khi di chuột bằng cách tăng độ lệch dọc. Xem ví dụ bên dưới

    
        
background: linear-gradient(to left, #f69ec4, #f9dd94 100%);
background-position: 0 100%;
background-size: 100% 2px;
background-repeat: repeat-x;
    

1

    
        
background: linear-gradient(to left, #f69ec4, #f9dd94 100%);
background-position: 0 100%;
background-size: 100% 2px;
background-repeat: repeat-x;
    

2

Here we attach two shadows to our element:

• hình nhỏ thay đổi bóng từ bóng bên ngoài (phần đầu) thành bóng bên trong
• 0 -30px 0 rgba(50,85,127,0. 5). 0 là phần bù ngang, -30px phần bù dọc, 0 bán kính mờ và rgba(50,85,127,0. 5) là nửa trong suốt (0. 5 độ mờ) màu xanh lam
  
• 0 2px 0 rgba(50,85,127,0. 5). 0 là phần bù ngang, 2px phần bù dọc, 0 bán kính mờ
  

Đọc thêm về bóng CSS trong bài viết của chúng tôi CSS Shadows

Gạch chân hoạt hình “viết tay” trên Hover

Đối với phần cuối, hãy tạo những đường gạch dưới lạ mắt sẽ xuất hiện khi di chuột. Cái đầu tiên sẽ gợi nhớ đến một nét chữ viết tay và cái thứ hai là một nét vẽ nhẹ nhàng của bút đánh dấu.  

Chúng tôi sẽ làm điều này với sự trợ giúp của Scalable Vector Graphics (SVG). Chúng ta sẽ có một phần tử HTML cho SVG và một khối cho văn bản có liên kết (chọn một trong hai. mực-svgline hoặc. liên kết-svgmarker)

Cấu trúc chung

    
        
background: linear-gradient(to left, #f69ec4, #f9dd94 100%);
background-position: 0 100%;
background-size: 100% 2px;
background-repeat: repeat-x;
    

3

Thay thế nhận xét “Khối SVG vô hình” bằng đoạn mã sau

    
        
background: linear-gradient(to left, #f69ec4, #f9dd94 100%);
background-position: 0 100%;
background-size: 100% 2px;
background-repeat: repeat-x;
    

4

Dưới đây là các quy tắc CSS để ẩn phần tử này

    
        
background: linear-gradient(to left, #f69ec4, #f9dd94 100%);
background-position: 0 100%;
background-size: 100% 2px;
background-repeat: repeat-x;
    

5

Và đây là các quy tắc CSS chung cho cả hai ví dụ sẽ tuân theo

    
        
background: linear-gradient(to left, #f69ec4, #f9dd94 100%);
background-position: 0 100%;
background-size: 100% 2px;
background-repeat: repeat-x;
    

6

Ví dụ SVG đầu tiên

Thay thế nhận xét “Ví dụ SVG đầu tiên” bằng đoạn mã này (sử dụng bất kỳ văn bản nào bạn cần, chỉ giữ cấu trúc với các lớp)