Bagaimana untuk melaksanakan anak panah dengan garis mendatar dalam css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk melaksanakan anak panah dengan garis mendatar dalam css

青灯夜游

Lepaskan： 2022-04-25 18:58:20

asal

4865 orang telah melayarinya

Kaedah: 1. Tentukan elemen kosong; 2. Gunakan "::before" dan kandungan untuk memasukkan baris mendatar, sintaksnya ialah "Element::before{content:"——"}"; Gunakan ": :after" dan anak panah sisip kandungan, sintaksnya ialah "Element::after{content:">"}".

Bagaimana untuk melaksanakan anak panah dengan garis mendatar dalam css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Pelaksanaan CSS anak panah dengan garisan mendatar

Kaedah pelaksanaan:

Tentukan elemen kosong , (contohnya, teg span yang tidak mengandungi kandungan)
Gunakan pemilih ::before dan atribut kandungan untuk memasukkan garis mendatar
Gunakan::selepas Anak panah sisipan atribut Pemilih dan kandungan

Contoh pelaksanaan:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span::before{
content: "——";
}
span::after{
content: ">";
}
p::before{
content: "<";
}
p::after{
content: "=";
}
    </style>
</head>
 
<body>
    <span></span>
<p></p>
</body>
 
</html>

Salin selepas log masuk

Bagaimana untuk melaksanakan anak panah dengan garis mendatar dalam css

Arahan::: sebelum pemilih dan ::selepas pemilih

::sebelum pemilih memasukkan kandungan sebelum elemen yang dipilih.

::selepas pemilih memasukkan kandungan selepas elemen yang dipilih.

Kedua-dua::before selector dan ::after selector perlu menggunakan atribut kandungan untuk menentukan kandungan yang hendak disisipkan.

Pengetahuan lanjutan: senario penggunaan kandungan

Takrifan kandungan menyebut bahawa ia digunakan bersama dengan pseudo :sebelum dan :selepas -elemen . :sebelum dan :selepas ialah unsur pseudo yang paling biasa, dan semua orang mesti biasa dengannya.

Pengenalan ringkas kepada :sebelum dan :selepas:

Paparan lalai: sebaris;
Atribut kandungan mesti ditetapkan, jika tidak, ia akan menjadi tidak sah; 🎜>

Mari kita lihat senario penggunaan utama:

Sisipkan aksara

Menggunakan kandungan untuk memasukkan aksara biasanya menetapkan nilai lalai untuk elemen kosong. Sama seperti atribut pemegang tempat input, ia hanya dipaparkan apabila elemen tidak mempunyai kandungan Kod adalah seperti berikut:

<p>有内容的段落</p>
<p></p>

<!--:empty 是一个 CSS 选择器，当元素里面无内容的时候进行匹配-->
p:empty::before {
  content: &#39;空元素内容&#39;;
  color: red;
}

Salin selepas log masuk

Kesannya adalah seperti berikut:

Bagaimana untuk melaksanakan anak panah dengan garis mendatar dalam css

Penjanaan Elemen Tambahan

Inti utama pada masa ini bukanlah kandungan yang dihasilkan oleh kandungan, tetapi elemen pseudo itu sendiri. Biasanya kami meletakkan kandungan nilai harta ditetapkan kepada rentetan kosong, dan kod CSS lain digunakan untuk menjana elemen pembantu, atau untuk mencapai kesan grafik, atau untuk mencapai reka letak tertentu.

Kesan grafik

Gunakan ::selepas unsur pseudo untuk memasukkan elemen gantian tanpa nama, tetapkan kandungan kepada kosong, elemen ini mempunyai tiada kandungan, dan gayakannya melalui CSS untuk mencapai kesan grafik yang diingini. Kodnya adalah seperti berikut:

<div class="content-box"></div>

.content-box {
  height: 100px;
  width: 200px;
  border-radius: 10px;
  position: relative;
  background: #fff;
}
.content-box::after {
  content: &#39;&#39;;
  position: absolute;
  top: 100%;
  right: 16px;
  width: 4px;
  height: 16px;
  border-width: 0;
  border-right: 12px solid #fff;
  border-radius: 0 0 32px 0;
}

Salin selepas log masuk

Kesannya adalah seperti berikut:

Bagaimana untuk melaksanakan anak panah dengan garis mendatar dalam css

Apungan jelas

Membersihkan terapung terutamanya untuk menyelesaikan masalah bahawa ketinggian dalaman elemen induk adalah 0 disebabkan oleh terapung unsur anak Kodnya adalah seperti berikut:

<div class="info-box clear">
  <div class="left">左</div>
  <div class="right">右</div>
</div>

.clear::after {
 content: &#39;&#39;;
 display: block;
 clear: both;
}

Salin selepas log masuk

Tiga di atas adalah amat diperlukan:

Kosongkan apungan dengan menambah elemen dan sentuh BFC supaya ketinggian elemen boleh menyesuaikan diri dengan ketinggian sub-kotak.

Penjanaan imej

Gunakan fungsi url untuk memaparkan imej secara terus Anda boleh menambah imej sebelum dan selepas teks, atau terus menggantikan teks.

Gambar secara langsung menggantikan teks Kod adalah seperti berikut:

<p class="img-test">文字</p>

.img-test {
  display: block;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  content: url(&#39;../assets/test2.jpg&#39;);
}

Salin selepas log masuk

Tambah gambar sebelum dan selepas teks >Dalam skema pertama, elemen pseudo menetapkan gambar melalui kandungan Saiz gambar sukar dikawal, dan gambar yang dipaparkan adalah saiz asal, yang secara umumnya kabur, kaedah gambar latar belakang Skim 2 digunakan , dan saiz boleh ditetapkan mengikut keperluan.

<!--方案一 -->
.img-test::after {
  content: url(&#39;../assets/test2.jpg&#39;);
}

<!--方案二 -->
.img-test::after {
  content: &#39;&#39;;
  display: block;
  height: 20px;
  width: 20px;
  background: url(&#39;../assets/test2.jpg&#39;);
}

Salin selepas log masuk

penjanaan kandungan nilai atribut attr

Gunakan attr untuk mendapatkan nilai atribut elemen untuk mencapai kesan Ia biasanya digunakan untuk mendapatkan sambungan teg kod adalah seperti berikut:

Kesannya adalah seperti berikut:

<a class="baidu-link" href="https://baidu.com"> 百度一下，你就知道!</a>

.baidu-link::after {
  content: " (" attr(href) ") "
}

Salin selepas log masuk

(Belajar perkongsian video:

tutorial video css Bagaimana untuk melaksanakan anak panah dengan garis mendatar dalam css ,

bahagian hadapan web

)

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan anak panah dengan garis mendatar dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!