search

Tạo dòng CSS

Ngày đăng: 01/12/2022
Trả lời: 0
Lượt xem: 71

Trong bài viết này, chúng ta sẽ xem cách thêm Đường kẻ ngang trong HTML. Đối với điều này, có 2 cách tiếp cận

Show
  • By using the
    tag
  • Bằng cách sử dụng Thuộc tính CSS

Chúng tôi sẽ thảo luận tuần tự cả hai cách tiếp cận để thêm đường ngang

Adding the Horizontal Line using

tag: The Horizontal Rule tag (
) is used for the purpose of inserting horizontal lines in the HTML document in order to separate sections of the document. It is an empty or unpaired tag that means there is no need for the closing tag.

cú pháp

Example 1: This example describes the  

tag to add the horizontal line.

HTML




.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
2

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3______34
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
6

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3______38____35

.my-element::before {
    content: "I'm a pseudo-element!";
    background: pink;
    padding: 0.25rem;
}
0
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
21
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
22
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
21
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
25
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
8
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
6

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3____330
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

.my-element::before {
    content: "I'm a pseudo-element!";
    background: pink;
    padding: 0.25rem;
}
0
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
34
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
22
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
34
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

.my-element::before {
    content: "I'm a pseudo-element!";
    background: pink;
    padding: 0.25rem;
}
0
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
40
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

.my-element::before {
    content: "I'm a pseudo-element!";
    background: pink;
    padding: 0.25rem;
}
0
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
44
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
45
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
44
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
25
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
30
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
6

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
25
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
4
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

đầu ra

Tạo dòng CSS

Example 2: This example describes the

tag with various attribute & their values to style the horizontal line.

HTML




.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
2

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3______34
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
6

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3______38____35

.my-element::before {
    content: "I'm a pseudo-element!";
    background: pink;
    padding: 0.25rem;
}
0
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
21
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
66
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
21
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
25
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
8
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
6

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3____330
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

.my-element::before {
    content: "I'm a pseudo-element!";
    background: pink;
    padding: 0.25rem;
}
0
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
34
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
39
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
34
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

.my-element::before {
    content: "I'm a pseudo-element!";
    background: pink;
    padding: 0.25rem;
}
0
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
40 
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
85
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
86
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
87

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
88
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
89
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
86
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
51

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
88
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
53____386
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
55
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

.my-element::before {
    content: "I'm a pseudo-element!";
    background: pink;
    padding: 0.25rem;
}
0
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
40 
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
85
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
86
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
87

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
88
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
89
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
86
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
51

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
88
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
53____386
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
200

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
88
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
202____386
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
204 
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
205

.my-element::before {
    content: "I'm a pseudo-element!";
    background: pink;
    padding: 0.25rem;
}
0
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
40 
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
85
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
86
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
211

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
88
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
202____386
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
215

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
88
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
89
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
86
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
219

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
88
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
53____386
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
223
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
224

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
25
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
30
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
6

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
25
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
4
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

đầu ra

Tạo dòng CSS

Thêm đường Ngang bằng Thuộc tính CSS. Trong trường hợp này, chúng ta sẽ sử dụng Thuộc tính kiểu viền để tạo đường kẻ ngang. Chúng ta có thể sử dụng thuộc tính border-top chỉ định kiểu của đường viền trên cùng hoặc thuộc tính border-bottom, có thể đặt kiểu của đường viền dưới cùng của một phần tử. Cả hai thuộc tính có thể được sử dụng để thêm đường ngang

ví dụ 3. Ví dụ này mô tả cách vẽ đường ngang bằng Thuộc tính kiểu viền

Trong bài viết ngắn này, chúng ta sẽ khám phá cách vẽ các đường trang trí bằng CSS bằng cách sử dụng Phần tử giả, Ảnh nền và SVG. Sau khi đọc xong, bạn sẽ học được một số kỹ thuật thú vị để vẽ dấu phân cách phần hoặc các thành phần đường trang trí khác bằng CSS

Tạo dòng CSS

yếu tố giả

Chúng tôi có thể tạo một 

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
63 bằng cách sử dụng bộ chọn 
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
0 hoặc 
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
1. Điều này thêm một phần tử con mới vào phần tử được nhắm mục tiêu của chúng tôi mà sau đó chúng tôi có thể tạo kiểu như thể đó là một phần tử bình thường

Để trình duyệt hiển thị phần tử giả, chúng ta cần đặt thuộc tính 

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
2

.my-element::before {
    content: "I'm a pseudo-element!";
    background: pink;
    padding: 0.25rem;
}

Kết quả

Bây giờ để tạo một đường trang trí, chúng ta đặt phần tử giả bên trong phần tử mà chúng ta muốn vẽ một đường trong đó

Trong các bản trình diễn bên dưới, tôi đã căn giữa văn bản và đặt chiều cao cho phần tử để chúng ta có thể thấy rõ đường kẻ ngang chạy phía sau văn bản, lưu ý rằng các thuộc tính này không được hiển thị trong CSS ví dụ

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}

Kết quả

Nút 

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3

Phương pháp này cho chúng ta rất nhiều sự linh hoạt nhưng sử dụng định vị tuyệt đối đòi hỏi phần tử cha phải có định vị tương đối. Điều này là do một phần tử có vị trí ________ 14 được định vị so với phần tử cha đầu tiên được tìm thấy có vị trí được đặt rõ ràng thành 

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

Điều này hoạt động khá tốt nhưng có thể gây ra sự cố khi các phần tử con khác có chỉ mục z được áp dụng hoặc muốn được định vị tương ứng với phần tử tiếp theo trong cây DOM

Chúng ta có thể tránh vấn đề định vị bằng cách sử dụng đường viền như thế này

.my-element {
    box-shadow: inset 0 0 0 1px #777;
    color: #777;
}

.my-element::before {
    content: '';
    display: block;
    padding-top: 2.5rem;
    margin-bottom: -2.5rem;
    border-bottom: 2px solid pink;
}

Kết quả

Nút 

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3

Tuy nhiên, nó giống như một thủ thuật để tạo một phần tử để vẽ một đường thẳng và bây giờ chúng ta cần biết chiều cao của phần tử cha

Hinh nên

Chúng ta có thể sử dụng 

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
7, 
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
8 và 
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
9 để “tạo” hình nền. Kết hợp với 
.my-element {
    box-shadow: inset 0 0 0 1px #777;
    color: #777;
}

.my-element::before {
    content: '';
    display: block;
    padding-top: 2.5rem;
    margin-bottom: -2.5rem;
    border-bottom: 2px solid pink;
}
0, 
.my-element {
    box-shadow: inset 0 0 0 1px #777;
    color: #777;
}

.my-element::before {
    content: '';
    display: block;
    padding-top: 2.5rem;
    margin-bottom: -2.5rem;
    border-bottom: 2px solid pink;
}
1 và 
.my-element {
    box-shadow: inset 0 0 0 1px #777;
    color: #777;
}

.my-element::before {
    content: '';
    display: block;
    padding-top: 2.5rem;
    margin-bottom: -2.5rem;
    border-bottom: 2px solid pink;
}
2, chúng ta có thể sử dụng các gradient này để “ăn gian” và vẽ một đường đơn giản

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
7

Kết quả

Nút 

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3

Điều này đã gọn gàng hơn rất nhiều, chúng ta có thể làm điều này tốt hơn nữa bằng cách tạo một lớp 

.my-element {
    box-shadow: inset 0 0 0 1px #777;
    color: #777;
}

.my-element::before {
    content: '';
    display: block;
    padding-top: 2.5rem;
    margin-bottom: -2.5rem;
    border-bottom: 2px solid pink;
}
4 riêng biệt và xác định một vài thuộc tính CSS

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
0
.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
1

Bây giờ chúng ta có thể áp dụng lớp 

.my-element {
    box-shadow: inset 0 0 0 1px #777;
    color: #777;
}

.my-element::before {
    content: '';
    display: block;
    padding-top: 2.5rem;
    margin-bottom: -2.5rem;
    border-bottom: 2px solid pink;
}
4 cho một phần tử và thiết lập các thuộc tính 
.my-element {
    box-shadow: inset 0 0 0 1px #777;
    color: #777;
}

.my-element::before {
    content: '';
    display: block;
    padding-top: 2.5rem;
    margin-bottom: -2.5rem;
    border-bottom: 2px solid pink;
}
6 và 
.my-element {
    box-shadow: inset 0 0 0 1px #777;
    color: #777;
}

.my-element::before {
    content: '';
    display: block;
    padding-top: 2.5rem;
    margin-bottom: -2.5rem;
    border-bottom: 2px solid pink;
}
7 để tạo kiểu cho nó

Bây giờ chúng ta cũng có thể làm mờ dần và mờ dần các dòng

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
5

Kết quả

Nút 

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3

Chúng tôi vẫn có thể đặt màu nền và có nhiều hình nền khác trên phần tử đích

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
7

Kết quả

Nút 

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3

URI dữ liệu SVG

Chúng tôi cũng có thể đặt hình nền bằng SVG nhưng tiếc là chúng tôi không thể sử dụng các biến CSS bên trong URI dữ liệu SVG

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
9

Kết quả

Nút 

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
3

Tôi chưa kiểm tra điều này nhưng tôi nghi ngờ việc sử dụng SVG chậm hơn 

.my-element {
    position: relative;
    z-index: 0;
}

.my-element::before {
    /* we want to draw a line, so no content needed */
    content: '';

    /* this sets the position and size of the pseudo-element */
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: pink;

    /* draw behind child elements */
    z-index: -1;
}
7 vì nó yêu cầu trình duyệt giải mã và vẽ SVG. tuy nhiên, SVG rất mạnh nên có thể là cách tốt nhất nếu bạn cần vẽ những đường rất kỳ lạ

Sự kết luận

Có nhiều cách để chúng ta có thể vẽ các đường trang trí bằng CSS. Chúng tôi nhận thấy các phần tử giả mang lại cho chúng tôi rất nhiều tính linh hoạt nhưng cũng yêu cầu định vị có thể gây ra tác dụng phụ

Thay vào đó, việc sử dụng các hình nền được tạo có thể là một công việc hay và không gây ra các vấn đề về định vị mà các phần tử giả có thể gây ra

SVG cũng là một lựa chọn thay thế hay nhưng không thể được tạo kiểu bằng Thuộc tính tùy chỉnh CSS và có thể chậm hơn một chút so với độ dốc tuyến tính

programming css

Bài Viết Liên Quan

Công văn số 180/mt-vp ngày 12/02/2023 năm 2024
Công văn số 180/mt-vp ngày 12/02/2023 năm 2024

mẹo hay
Dùng phần mề kế toán giải quyết đucợ những gì năm 2024
Dùng phần mề kế toán giải quyết đucợ những gì năm 2024

mẹo hay Kế toán online AMIS Kế toán
Last seen recently nghĩa là gì năm 2024
Last seen recently nghĩa là gì năm 2024

là ai Hỏi Đáp Là gì Ngôn ngữ Nghĩa là gì Last seen recently
Luyến ái 1 2 tên trung quốc là gì năm 2024
Luyến ái 1 2 tên trung quốc là gì năm 2024

là ai Hỏi Đáp Là gì
Cach chup anh va quay phim tren lap top năm 2024
Cach chup anh va quay phim tren lap top năm 2024

mẹo hay Top List Top Phim CyberLink YouCam Camera laptop
Sau sinh nên uống sữa tươi loại nào năm 2024
Sau sinh nên uống sữa tươi loại nào năm 2024

mẹo hay
Bị lỗi khi nộp tiền thuế qua mạng năm 2024
Bị lỗi khi nộp tiền thuế qua mạng năm 2024

mẹo hay Thuế điện tử thuedientu.gdt.gov.vn đăng nhập Tổng cục Thuế
Độc lập dân tộc là gì năm 2024
Độc lập dân tộc là gì năm 2024

là ai Hỏi Đáp Là gì
Đề thi toán tuổi thơ lớp 5 cấp quốc gia năm 2024
Đề thi toán tuổi thơ lớp 5 cấp quốc gia năm 2024

mẹo hay
Bài tập tiếng anh về bộ phận cơ thể người năm 2024
Bài tập tiếng anh về bộ phận cơ thể người năm 2024

mẹo hay Khỏe Đẹp Cơ thể Bài tập Học Tốt Tiếng anh
Anh em dùng ứng dụng mindmap nào tinh tế năm 2024
Anh em dùng ứng dụng mindmap nào tinh tế năm 2024

mẹo hay Mindnode là gì Cách dụng MindNode Xmind
155 park rive ecopak văn giang hưng yên năm 2024
155 park rive ecopak văn giang hưng yên năm 2024

mẹo hay
Các bộ phận trong khách sạn tiếng anh là gì năm 2024
Các bộ phận trong khách sạn tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh
Lỗi không nhận được mã xác thực facebook qua sms năm 2024
Lỗi không nhận được mã xác thực facebook qua sms năm 2024

mẹo hay Công Nghệ Facebook
Trứng rán tiếng anh là gì năm 2024
Trứng rán tiếng anh là gì năm 2024

là ai Hỏi Đáp Là gì Học Tốt Tiếng anh
Toán lớp 4 trang 83 84 luyện tập năm 2024
Toán lớp 4 trang 83 84 luyện tập năm 2024

mẹo hay
Sữa tắm trắng da hàn quốc nào tốt năm 2024
Sữa tắm trắng da hàn quốc nào tốt năm 2024

mẹo hay
Công ty cv là viết tắt của từ gì năm 2024
Công ty cv là viết tắt của từ gì năm 2024

là ai Cv là gì
Deo chương v hóa hữu cô lơp 10 năm 2024
Deo chương v hóa hữu cô lơp 10 năm 2024

mẹo hay Hóa vô cơ
Cách đánh công thức hóa học trong word 2007 năm 2024
Cách đánh công thức hóa học trong word 2007 năm 2024

mẹo hay Mẹo Hay Cách Học Tốt Học Công thức

Quảng Cáo

Có thể bạn quan tâm

Lãi suất hoàn vốn là gì năm 2024
1 ngày trước . bởi CrookedMonument
Xin lỗi a chỉ là sát thủ bản cam năm 2024
1 ngày trước . bởi TreacherousCommissioner
Cuộc trò chuyện đã lưu trữ là gì năm 2024
1 ngày trước . bởi PreparedForefinger
Cách hủy thanh toán tự động trong techcombank năm 2024
1 ngày trước . bởi GrinningTablespoon
Bài tập tổng hợp về thuế có lời giải năm 2024
1 ngày trước . bởi PrimalTheology
Bị giật tay và mắt là bị gì năm 2024
1 ngày trước . bởi AdaptiveEndangerment
Giao dịch viên thuộc bộ phận nào trong ngân hàng năm 2024
1 ngày trước . bởi GiddyContents
Caác định luật bảo toàn trong hóa học năm 2024
1 ngày trước . bởi UnhealthyIllustration
Bát tự không hợp tiếng trung là gì năm 2024
1 ngày trước . bởi CoastalRedistribution
Lỗi the system cannot find the file specified win 7 năm 2024
1 ngày trước . bởi SexyDominance

Toplist được quan tâm

#1
Top 7 tết mậu thân năm 1968 đã diễn ra sự kiện gì ở miền nam nước ta 2023
5 tháng trước
#2
Top 13 luyện từ và câu: dấu gạch ngang lớp 4 trang 45 2023
5 tháng trước
#3
Top 6 trong mặt phẳng oxy ảnh của đường thẳng d 3x y 4=0 2023
5 tháng trước
#4
Top 6 thử thách thần chết thuyết minh phần 2 2023
5 tháng trước
#5
Top 4 vở bài tập tiếng việt lớp 3 tập 2 chính tả trang 15 2023
5 tháng trước
#6
Top 5 áo khoác nam quảng châu cao cấp 2023
5 tháng trước
#7
Top 4 nội dung nào sau đây không phải là trách nhiệm của đơn vị đầu mối cung cấp thông tin 2023
5 tháng trước
#8
Top 9 mẫu đồng phục công sở đẹp 2022 2023
5 tháng trước
#9
Top 5 ốp lưng iphone 13 pro bảo vệ camera 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Bài tập có lời giải tổ chức thi công năm 2024
4 ngày trước . bởi VolubleBrowsing
Giải các bài toán tìm x lớp 4 năm 2024
1 tuần trước . bởi PredominantManga
Bị tê gót chân là bệnh gì năm 2024
1 tuần trước . bởi AdultClerk
Cuộc gọi không xác định là gì năm 2024
1 tuần trước . bởi UncontrollableComplexity
Dđiện trở các cặp dây máy nén là bao nhiêu năm 2024
2 ngày trước . bởi TelevisedNarration
Vietnam airline được ký gửi bao nhiêu kg năm 2024
1 ngày trước . bởi ProlongedSeating
Last seen recently nghĩa là gì năm 2024
47 phút trước . bởi High-levelRelaxation
Đại học tôn đức thắng bao nhiêu 1 tín chỉ năm 2024
6 ngày trước . bởi WashedChina
1 8 ga tương đương bao nhiêu km h năm 2024
6 ngày trước . bởi All-powerfulFrequency
Anh trai gọi em gái là gì trong tiếng hàn năm 2024
6 ngày trước . bởi SpentDeliverance

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 boxhoidap.com Inc.