Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan anak panah dengan garis mendatar dalam css

Bagaimana untuk melaksanakan anak panah dengan garis mendatar dalam css

青灯夜游asal: 2022-04-25 18:58:204903semak imbas

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:">"}".

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>

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; 🎜>
tidak boleh digunakan melalui dom, iaitu elemen halaman yang tidak wujud. Mereka tidak boleh ditemui dalam kod sumber HTML, tetapi Secara Visual, anda boleh melihat kewujudannya.

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;
}

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;
}

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;
}

Tiga di atas adalah amat diperlukan:

jelas: kedua-duanya: Jelas terapung supaya kedua-dua bahagian elemen tidak terapung.
paparan: blok: clear hanya berkuat kuasa pada elemen peringkat blok.

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;);
}

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;);
}

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) ") "
}

(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!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Terdapat beberapa jenis penghias dalam es6Artikel seterusnya：Terdapat beberapa jenis penghias dalam es6

Artikel berkaitan

Lihat lagi