Hướng dẫn lines before and after text css - dòng trước và sau css văn bản

Question

Bạn muốn cung cấp cho các tiêu đề của các trang của bạn một phong cách nguyên bản và hấp dẫn, nhưng bạn không biết làm thế nào? Đọc đoạn này và bạn sẽ học thêm các dòng trước và sau các tiêu đề. Bạn có thể có được một hiệu ứng như vậy bằng cách sử dụng :: Trước và :: sau các yếu tố giả. Hãy cùng nhau làm điều đó từng bước một.

Nội dung chính Show

Ví dụ về việc thêm các dòng trước và sau văn bản tiêu đề:
Kết quả
Ví dụ về việc thêm các dòng ngang trước và sau văn bản:
Làm thế nào để bạn đặt một dòng trước văn bản trong CSS?
Làm thế nào để bạn đặt một dòng sau văn bản trong CSS?
Làm cách nào để thêm một đường ngang sau văn bản trong HTML?
Làm thế nào trước và sau khi làm việc trong CSS?

Đặt văn bản tiêu đề của bạn trong phần tử.

Đặt phông chữ và kích thước phông chữ của tiêu đề với các thuộc tính của phông chữ và phông chữ.
Căn chỉnh tiêu đề đến trung tâm với giá trị "trung tâm" của thuộc tính văn bản.
Tạo không gian xung quanh tiêu đề với thuộc tính lề.
Chúng tôi sẽ thêm một dòng trước khi tiêu đề thông qua :: trước khi giả yếu tố và sau đó, chỉ định màu của văn bản.
Đặt thuộc tính nội dung, luôn được sử dụng với :: Trước và :: sau các yếu tố giả để tạo nội dung bên trong một phần tử.
Đặt chiều cao và chiều rộng của dòng theo văn bản của bạn.
Bạn có thể cung cấp cho dòng một màu bằng cách sử dụng thuộc tính nền.
Xác định vị trí trên và bên trái của dòng với các thuộc tính trên và bên trái.
Để tạo kiểu :: Sau khi giả, sử dụng các thuộc tính tương tự ở trên. Chỉ thay vì thuộc tính bên trái, bạn cần đặt thuộc tính bên phải.

h2 {
  font-family: sans-serif;
  margin: 100px auto;
  color: #228B22;
  text-align: center;
  font-size: 30px;
  max-width: 600px;
  position: relative;
}

h2:before {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  background: #000;
  left: 0;
  top: 50%;
  position: absolute;
}

h2:after {
  content: "";
  display: block;
  width: 120px;
  height: 2px;
  background: #000;
  right: 0;
  top: 50%;
  position: absolute;
}

Bây giờ, hãy để Lừa đặt toàn bộ mã với nhau và thử một số ví dụ.

Ví dụ về việc thêm các dòng trước và sau văn bản tiêu đề:

html>
<html>
  <head>
    <title>Title of the documenttitle>
    <style>
      h2 {
        font-family: sans-serif;
        margin: 100px auto;
        color: #228B22;
        text-align: center;
        font-size: 30px;
        max-width: 600px;
        position: relative;
      }
      h2:before {
        content: "";
        display: block;
        width: 130px;
        height: 5px;
        background: #191970;
        left: 0;
        top: 50%;
        position: absolute;
      }
      h2:after {
        content: "";
        display: block;
        width: 130px;
        height: 5px;
        background: #191970;
        right: 0;
        top: 50%;
        position: absolute;
      }
    style>
  head>
  <body>
    <h2>Welcome to W3Docs!h2>
  body>
html>

Kết quả

Chào mừng bạn đến với W3DOCS!

Nếu bạn muốn các dòng gần hơn với văn bản, bạn cần thay đổi vị trí bên trái và bên phải.

Ví dụ về việc thêm các dòng ngang trước và sau văn bản:

html>
<html>
  <head>
    <title>Title of the documenttitle>
    <style>
      h2 {
        font-family: sans-serif;
        margin: 100px auto;
        text-align: center;
        color: black;
        font-size: 40px;
        max-width: 600px;
        position: relative;
      }
      h2:before {
        content: "";
        display: block;
        width: 150px;
        height: 5px;
        background: #CD5C5C;
        left: 85px;
        top: 50%;
        position: absolute;
      }
      h2:after {
        content: "";
        display: block;
        width: 150px;
        height: 5px;
        background: #CD5C5C;
        right: 85px;
        top: 50%;
        position: absolute;
      }
    style>
  head>
  <body>
    <h2>Hello!h2>
  body>
html>

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

Không gian trắng: preline; được sử dụng để chèn ngắt dòng trước một phần tử. Đầu ra: Phá vỡ đường giữa các phần tử HTML: Phá vỡ dòng giữa các phần tử HTML có thể được thêm vào bằng cách sử dụng các thuộc tính CSS.white-space: preline; is used to insert line break before an element. Output: Line-break between HTML Elements: The line-break between HTML elements can be added by using CSS properties.

Làm thế nào để bạn đặt một dòng sau văn bản trong CSS?

Một sự phá vỡ dòng có thể được thêm vào trong HTML, chỉ sử dụng CSS, bằng cách sử dụng pseudo-class :: sau hoặc :: trước. Trong bảng kiểu, chúng tôi sử dụng các lớp giả này, với lớp HTML hoặc ID, trước hoặc sau nơi chúng tôi muốn chèn một dòng phá vỡ. Trong MyClass :: Sau: Đặt thuộc tính Nội dung thành "\ A" (ký tự dòng mới).employing the pseudo-class ::after or ::before . In the stylesheet, we use these pseudo-classes, with the HTML class or id, before or after the place where we want to insert a line-break. In myClass::after : Set the content property to "\a" (the new-line character).

Làm cách nào để thêm một đường ngang sau văn bản trong HTML?

Trong khi làm việc trên các trang web, bạn có thể muốn thêm một dòng nằm ngang để chỉ ra sự thay đổi theo chủ đề giữa các phần khác nhau.Để tạo một đường ngang trong HTML, bạn sẽ cần sử dụng thẻ HR HR.HR là một phần tử cấp khối di chuyển tất cả các yếu tố sau khi nó sang một dòng khác.use the HTML hr tag. HR is a block-level element that moves all the elements after it to another line.

Làm thế nào trước và sau khi làm việc trong CSS?

CSS :: trước khi chọn chèn nội dung trước một phần tử đã chọn.css: Sau khi chèn nội dung sau một phần tử được chỉ định.Các bộ chọn này thường được sử dụng để thêm văn bản trước hoặc sau một đoạn văn hoặc một liên kết. CSS :after inserts content after a specified element. These selectors are commonly used to add text before or after a paragraph or a link.

programming css Before line CSS Horizontal line CSS Line-through text CSS CSS line text

Hướng dẫn lines before and after text css - dòng trước và sau css văn bản

Ví dụ về việc thêm các dòng trước và sau văn bản tiêu đề:

Kết quả

Ví dụ về việc thêm các dòng ngang trước và sau văn bản:

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

Làm thế nào để bạn đặt một dòng sau văn bản trong CSS?

Làm cách nào để thêm một đường ngang sau văn bản trong HTML?

Làm thế nào trước và sau khi làm việc trong CSS?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội