Hướng dẫn draw line with before css - vẽ đường thẳng trước css

Tôi đang sử dụng yếu tố giả

.mydiv img {
  width: 100%;
  height: auto;
}

0 và

.mydiv img {
  width: 100%;
  height: auto;
}

1 để vẽ một dòng trước và sau một tiêu đề. Nó hoạt động với một hình ảnh:

.mydiv::before {
content: url(img/line.png);}
.mydiv::after {
content: url(img/line.png);}

Đây là kết quả:

Nhưng, tôi muốn dòng mở rộng và điền vào toàn bộ Div trước và sau tiêu đề, như thế này:

Có cách nào để chỉ định tỷ lệ phần trăm cho hình ảnh để nó kéo dài không? Tôi thử điều này, nhưng nó không hoạt động:

.mydiv img {
  width: 100%;
  height: auto;
}

Lcsalazar

16.2k3 Huy hiệu vàng34 Huy hiệu bạc68 Huy hiệu Đồng3 gold badges34 silver badges68 bronze badges

hỏi ngày 10 tháng 2 năm 2015 lúc 14:45Feb 10, 2015 at 14:45

2

Bạn không cần cả

.mydiv img {
  width: 100%;
  height: auto;
}

0 và

.mydiv img {
  width: 100%;
  height: auto;
}

1, một trong hai sẽ là đủ và như bạn đã nói, bạn không cần một hình ảnh. Xem cách tiếp cận dưới đây.

#header {
    width: 100%;
    height: 50px;
    margin: 50px 0;
    text-align: center;
    font-size: 28px;
    position: relative;
    background-color: #57585C;
}

#header:after {
    content: '';
    width: 100%;
    border-bottom: solid 1px #fff;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 1;
}

h3 {
    background-color: #57585C; /* Same as the parents Background */
    width: auto;
    display: inline-block;
    z-index: 3;
    padding: 0 20px 0 20px;
    color: white;
    position: relative;
    font-family: calibri;
    font-weight: lighter;
    margin: 0;
}

   
Last Projects

Midas

6.8925 Huy hiệu vàng33 Huy hiệu bạc52 Huy hiệu Đồng5 gold badges33 silver badges52 bronze badges

Đã trả lời ngày 10 tháng 2 năm 2015 lúc 14:58Feb 10, 2015 at 14:58

Geekleek Sleek GeekSleek Geek

4.5183 Huy hiệu vàng26 Huy hiệu bạc39 Huy hiệu Đồng3 gold badges26 silver badges39 bronze badges

3

Trong trường hợp bạn cần

.mydiv img {
  width: 100%;
  height: auto;
}

4 tiêu đề để có nền trong suốt - bạn có thể sử dụng cả

.mydiv img {
  width: 100%;
  height: auto;
}

0 và

.mydiv img {
  width: 100%;
  height: auto;
}

1 và

.mydiv img {
  width: 100%;
  height: auto;
}

7

Thông tin thêm về

.mydiv img {
  width: 100%;
  height: auto;
}

8 Bạn có thể đọc ở đây https://developer.mozilla.org/en-us/docs/web/css/flex.

body {
  background: linear-gradient(0.25turn, #3f87a6, #000000, #f69d3c); /* example of custom background */
}

#header {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center; /* making vertical centerign of all children */
}

#header::before, #header::after {
  content: '';
  flex: 1 1 auto; /* the first digint is 'flex-grow: 1', helps elemet to occupy all free space */ 
  border-bottom: solid 1px #fff;
}

h3 {
  flex: 0 1 auto; /* the first digint is flex-grow: 0 */ 
  padding: 0 15px 0 15px;
  color: #fff;
}

  
Last Projects

Đã trả lời ngày 13 tháng 6 năm 2020 lúc 11:29Jun 13, 2020 at 11:29

focus.stylefocus.stylefocus.style

6.3534 Huy hiệu vàng24 Huy hiệu bạc37 Huy hiệu đồng4 gold badges24 silver badges37 bronze badges

1

About us

Đã trả lời ngày 13 tháng 6 năm 2020 lúc 10:52Jun 13, 2020 at 10:52

EMAN JAYMEMAN JAYMEEman Jayme

2302 Huy hiệu bạc8 Huy hiệu Đồng2 silver badges8 bronze badges

1

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.

• Đặ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>