Mũi tên CSS trước sau

Question

Mũi tên HTML cung cấp tất cả các mã biểu tượng html mà bạn cần để đơn giản hóa thiết kế trang web của mình. Mũi tên HTML được chia sẻ bởi Toptal Designers, thị trường tuyển dụng các nhà thiết kế UI, UX và Visual ưu tú, cùng với các nhà phát triển tài chính và nhà phát triển hàng đầu. Khám phá lý do tại sao các công ty hàng đầu và công ty khởi nghiệp chuyển sang Toptal để thuê các nhà thiết kế tự do cho các dự án quan trọng của họ

Nội dung chính Show

Cách sử dụng đơn giản
ví dụ trang trí
Chú giải công cụ
Mối quan tâm về khả năng tiếp cận
Làm cách nào để vẽ mũi tên trong CSS?
Làm cách nào để thêm mũi tên vào div trong CSS?
Làm cách nào để tạo hình tam giác trong CSS?
Làm cách nào để vẽ một mũi tên trong HTML?

Trong CSS,

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

6 tạo phần tử giả là phần tử con cuối cùng của phần tử được chọn. Nó thường được sử dụng để thêm nội dung mỹ phẩm vào một phần tử có thuộc tính

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

7. Nó là nội tuyến theo mặc định

Thử nó

Ghi chú. Các phần tử giả được tạo bởi

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

8 và

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

6 được chứa trong hộp định dạng của phần tử và do đó không áp dụng cho các phần tử được thay thế, chẳng hạn như phần tử

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

1 hoặc

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

2

cú pháp

::after

Ghi chú. CSS đã giới thiệu ký hiệu

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

6 (với hai dấu hai chấm) để phân biệt các lớp giả với các phần tử giả. Để tương thích ngược, các trình duyệt cũng chấp nhận

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

4, được giới thiệu trước đó

ví dụ

Cách sử dụng đơn giản

Hãy tạo hai lớp. một cho những đoạn nhàm chán và một cho những đoạn thú vị. Chúng ta có thể sử dụng các lớp này để thêm các phần tử giả vào cuối đoạn văn

HTML

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

CSS

.exciting-text::after {
  content: " <- EXCITING!";
  color: green;
}

.boring-text::after {
  content: " <- BORING";
  color: red;
}

Kết quả

ví dụ trang trí

Chúng ta có thể tạo kiểu cho văn bản hoặc hình ảnh trong thuộc tính

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

7 theo bất kỳ cách nào chúng ta muốn

HTML

<span class="ribbon">Look at the orange box after this text. </span>

CSS

.ribbon {
  background-color: #5bc8f7;
}

.ribbon::after {
  content: "This is a fancy orange box.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}

Kết quả

Chú giải công cụ

Ví dụ này sử dụng

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

6, kết hợp với biểu thức CSS

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

7 và thuộc tính dữ liệu tùy chỉnh

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

8, để tạo chú giải công cụ. Không cần JavaScript

Chúng tôi cũng có thể hỗ trợ người dùng bàn phím bằng kỹ thuật này, bằng cách thêm

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

9 của

.exciting-text::after {
  content: " <- EXCITING!";
  color: green;
}

.boring-text::after {
  content: " <- BORING";
  color: red;
}

0 để làm cho mỗi bàn phím

.exciting-text::after {
  content: " <- EXCITING!";
  color: green;
}

.boring-text::after {
  content: " <- BORING";
  color: red;
}

1 có thể đặt tiêu điểm và sử dụng bộ chọn CSS

.exciting-text::after {
  content: " <- EXCITING!";
  color: green;
}

.boring-text::after {
  content: " <- BORING";
  color: red;
}

2. Điều này cho thấy

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

8 và

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

6 có thể linh hoạt như thế nào, mặc dù để có trải nghiệm dễ tiếp cận nhất, một tiện ích tiết lộ ngữ nghĩa được tạo theo một số cách khác (chẳng hạn như với các chi tiết và yếu tố tóm tắt) có thể sẽ phù hợp hơn

HTML

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

4

CSS

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

5

Kết quả

Mối quan tâm về khả năng tiếp cận

Việc sử dụng phần tử giả

<p class="boring-text">Here is some plain old boring text.</p>
<p>Here is some normal text that is neither boring nor exciting.</p>
<p class="exciting-text">Contributing to MDN is easy and fun.</p>

6 để thêm nội dung không được khuyến khích vì trình đọc màn hình không thể truy cập phần tử này một cách đáng tin cậy

Làm cách nào để vẽ mũi tên trong CSS?

Cách tiếp cận. Tạo mũi tên bằng CSS rất đơn giản. Đầu tiên, tạo một hình chữ L (bảng chữ cái) bằng cách sử dụng thuộc tính box-shadow nào đó rồi xoay hình đó sang một góc nào đó để căn chỉnh chúng (cả mũi tên trái và phải) với nhau. HTML Code: In this section, two div elements are created, one for each arrow.

Làm cách nào để thêm mũi tên vào div trong CSS?

Trước tiên, bạn sẽ bắt đầu bằng cách sử dụng bộ chọn lớp giả,. sau đó. Bên trong bộ chọn, bạn cần đặt giá trị cho thuộc tính nội dung. Một chuỗi rỗng là tốt nếu bạn không có bất kỳ văn bản nào bạn muốn hiển thị. Sau đó, bạn phải đặt giá trị vị trí để mũi tên nằm ở đường viền dưới cùng mà bạn đã đặt cho div

Làm cách nào để tạo hình tam giác trong CSS?

Thông thường không có kỹ thuật trực tiếp nào để tạo tam giác bằng CSS. Tiếp cận. Để tạo tam giác, trong phần HTML, chúng ta chỉ cần thêm một div cho mỗi tam giác . Khái niệm này là tạo một hộp không có chiều rộng hoặc chiều cao. Chiều rộng của đường viền xác định chiều rộng và chiều cao thực tế của Tam giác.