Vẽ đường với trước css

Đơn giản ngu ngốc, phải không? . Nhưng thật thú vị khi suy nghĩ trong vài phút và đếm nhiều cách khác nhau mà chúng ta có thể làm. Và ý tôi là gì bởi một dòng nào? . CSS không thể vẽ một đường từ bất kỳ điểm nào đến bất kỳ điểm nào?

Dấu hai chấm thay thế ký hiệu dấu hai chấm đơn cho các phần tử giả trong CSS3. Đây là một nỗ lực của W3C nhằm phân biệt giữa các lớp giả và các phần tử giả

Cú pháp dấu hai chấm đơn được sử dụng cho cả lớp giả và phần tử giả trong CSS2 và CSS1

Để tương thích ngược, cú pháp một dấu hai chấm được chấp nhận cho các phần tử giả CSS2 và CSS1

---

---

Các. phần tử giả chữ cái đầu tiên

Phần tử giả

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

9 được sử dụng để thêm một kiểu đặc biệt cho chữ cái đầu tiên của văn bản

Ví dụ sau định dạng chữ cái đầu tiên của văn bản trong tất cả

yếu tố.  

Ghi chú. Phần tử giả

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

9 chỉ có thể được áp dụng cho các phần tử cấp khối

Các thuộc tính sau áp dụng cho. phần tử giả chữ cái đầu tiên.  

• thuộc tính phông chữ
• thuộc tính màu
• thuộc tính nền
• thuộc tính ký quỹ
• thuộc tính đệm
• thuộc tính đường viền
• trang trí văn bản
• căn dọc (chỉ khi "float" là "không")
• chuyển đổi văn bản
• chiều cao giữa các dòng
• trôi nổi
• xa lạ

---

Các phần tử giả và các lớp HTML

Các phần tử giả có thể được kết hợp với các lớp HTML.  

Ví dụ trên sẽ hiển thị chữ cái đầu tiên của đoạn văn có class="intro", màu đỏ và ở kích thước lớn hơn

---

Nhiều phần tử giả

Một số phần tử giả cũng có thể được kết hợp

Trong ví dụ sau, chữ cái đầu tiên của đoạn văn sẽ có màu đỏ, ở cỡ chữ lớn xx. Phần còn lại của dòng đầu tiên sẽ có màu xanh lam và ở dạng vốn hóa nhỏ. Phần còn lại của đoạn văn sẽ là cỡ chữ và màu sắc mặc định

Ví dụ

p. chữ cái đầu tiên {
  màu. #ff0000;
  cỡ chữ. xx-lớn;
}

p. màu dòng đầu tiên {
. #0000ff;
  biến thể phông chữ. vốn hóa nhỏ;
}

Tự mình thử »

---

CSS - Các. trước phần tử giả

Phần tử giả

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

1 có thể được sử dụng để chèn một số nội dung trước nội dung của phần tử

Ví dụ sau chèn một hình ảnh trước nội dung của mỗi

thành phần

---

CSS - Các. sau phần tử giả

Phần tử giả

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

2 có thể được sử dụng để chèn một số nội dung sau nội dung của một phần tử

Ví dụ sau chèn một hình ảnh sau nội dung của mỗi

thành phần

---

CSS - Các. phần tử giả đánh dấu

Phần tử giả

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

30 chọn các điểm đánh dấu của các mục danh sách

Ví dụ sau tạo kiểu cho các điểm đánh dấu của các mục trong danh sách

---

CSS - Các. lựa chọn phần tử giả

Phần tử giả

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

31 khớp với phần của phần tử được người dùng chọn

Các thuộc tính CSS sau có thể được áp dụng cho

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

31.

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

33,

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

34,

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

35 và

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

36

Bài viết này sẽ hướng dẫn các bạn cách thêm đường kẻ ngang vào bên phải và bên trái văn bản như hình bên dưới

nếu bận){

Chuyển đến hoàn thành mã

} khác {

1. Tạo thẻ văn bản HTML

Trong tệp HTML của bạn, hãy tạo một thẻ

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

0 và đặt cho nó một tên lớp là

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

1

<h2 class="hr-lines">PEACE</h2>

2. Thêm dòng bên trái

Chúng ta sẽ sử dụng phần tử giả CSS

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

2 để thêm một dòng vào bên trái của văn bản. Áp dụng mã bên dưới vào tệp CSS của bạn

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

Từ đoạn mã trên, chúng tôi đang tạo một phần tử mới có chiều cao là

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

0 và chiều rộng là

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

1 trước phần tử

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

1 bằng cách sử dụng thuộc tính nội dung, sau đó đặt cho nó một vị trí tuyệt đối để di chuyển nó xung quanh, chúng tôi đặt phần trên cùng thành

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

3 thành

3. Đặt .hr-lines:before{ content:" "; display: block; height: 2px; width: 130px; position: absolute; top: 50%; left: 0; background: red; } 1 thành tương đối

Để các phần tử giả được áp dụng cho phần tử đích, chúng ta phải đặt vị trí của phần tử thành tương đối, điều này sẽ làm cho tất cả chuyển động của

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

2 và

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

6 có liên quan đến phần tử gốc (văn bản)

Thêm các dòng sau vào tệp CSS của bạn

.hr-lines{
  position: relative;
}

kết quả đầu ra

Chúng tôi có thể khắc phục điều này bằng cách đặt

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

7 và thêm

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

8 vào phần tử

.hr-lines{
  position: relative;
  /*  new lines  */
  max-width: 500px;
  margin: 100px auto;
  text-align: center;
}

Chúng tôi đang đặt

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

2 ở bên trái của văn bản bằng cách đặt

.hr-lines{
  position: relative;
}

0

4. Thêm dòng bên phải

Chúng tôi sẽ sử dụng phần tử giả

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

6 để thêm dòng bên phải

Thêm các dòng mã sau vào tệp CSS của bạn để thêm đúng dòng vào văn bản

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

2

Chúng tôi đang đặt

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

6 ở bên phải của văn bản bằng cách đặt

.hr-lines{
  position: relative;
}

3

Kết quả cuối cùng

}

---

Mã hoàn chỉnh

.hr-lines{
  position: relative;
}

4

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

6

.hr-lines{
  position: relative;
}

5

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

8

kết thúc

Tôi hy vọng rằng bài viết này sẽ hỗ trợ bạn trong việc tạo văn bản có các dòng ngang phải và trái vào một thời điểm nào đó trong tương lai

---

Chà, thật là một hành trình, tôi rất vui vì bạn đã đi đến cuối bài viết này, nếu bạn thích và học được điều gì đó mới từ bài viết này, tôi sẽ muốn kết nối với bạn

Hãy kết nối trên

• Twitter @chúbigbay143
• LinkedIn @unclebigbay

---

---

Hẹn gặp lại các bạn trong bài viết tiếp theo. Tạm biệt 🙋‍♂️

Nếu bạn thấy nội dung của tôi hữu ích và muốn ủng hộ blog của tôi, bạn cũng có thể mua cho tôi một ly cà phê bên dưới, blog của tôi sống nhờ cà phê 🙏

Làm cách nào để vẽ đường thẳng trong CSS?

Làm thế nào để vẽ một dòng trước văn bản trong HTML?

Làm cách nào để chèn dòng trong CSS?