Perbincangan mendalam tentang penggunaan elemen pseudo CSS sebelum dan selepas

elemen pseudo CSS sebelum dan selepas ialah cara untuk menambah gaya sebelum dan selepas elemen HTML. Kedua-dua unsur pseudo CSS ini digunakan terutamanya untuk menambah elemen hiasan atau menambah gaya tambahan pada teks. Dalam artikel ini, kami akan meneroka penggunaan elemen pseudo CSS sebelum dan selepas dan memberikan beberapa contoh praktikal.

1. Penggunaan elemen pseudo CSS sebelum dan selepas

Sintaks adalah seperti berikut:

选择器:before{ content: ""; /* 插入内容 */ 属性:属性值; }
选择器:after{ content: ""; /* 插入内容 */ 属性:属性值; }

Antaranya, pemilih merujuk kepada pemilih elemen yang memerlukan untuk memasukkan elemen hiasan, sebelum dan selepas adalah unsur pseudo. Dalam sintaks di atas, nilai atribut kandungan digunakan untuk memasukkan kandungan (seperti teks, gambar, dll.). Selain itu, unsur pseudo sebelum dan selepas juga boleh menggunakan atribut gaya lain, seperti warna, latar belakang, sempadan, dsb.

2. Tambahkan awalan dan akhiran teks

Salah satu kegunaan paling biasa unsur pseudo CSS sebelum dan selepas ialah menambah awalan dan akhiran pada teks. Sebagai contoh, kita boleh menggunakan elemen pseudo sebelum meletakkan ikon kecil sebelum teks, seperti ini:

Kod HTML:

<p>下面是一些列表项：</p>
<ul>
  <li>CSS</li>
  <li>HTML</li>
  <li>JavaScript</li>
</ul>

Kod CSS:

li:before{
  content: url('icon.png');
  margin-right: 5px;
}

Dengan cara ini, kita boleh menambah ikon kecil di hadapan item senarai.

Anda juga boleh menggunakan elemen pseudo selepas untuk menambah kandungan selepas teks. Sebagai contoh, kita boleh menambah simbol "/" pada setiap sel jadual dalam jadual HTML dengan kod berikut:

Kod HTML:

<table>
  <tr>
    <td>苹果</td>
    <td>橘子</td>
    <td>香蕉</td>
  </tr>
</table>

Kod CSS:

td:after{
  content: "/";
  margin-left: 5px;
}

3. Cipta peluncur

elemen pseudo CSS sebelum dan selepas juga boleh digunakan untuk mencipta peluncur. Sebagai contoh, kita boleh membuat butang gelangsar dengan animasi gelongsor, kodnya adalah seperti berikut:

Kod HTML:

<button class="slider">Slide to Unlock</button>

Kod CSS:

.slider{
  width: 200px;
  height: 50px;
  border: none;
  background-color: #0084FF;
  color: #FFF;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-size: 1.2em;
}
.slider:before{
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  background: #FFF;
  top: 0;
  left: -5px;
  border-radius: 50%;
  transform: translateX(-100%) rotate(45deg);
  animation: slider 1s infinite;
}
@keyframes slider{
  0%{
    transform: translateX(-100%) rotate(45deg);
  }
  50%{
    transform: translateX(100%) rotate(45deg);
  }
  100%{
    transform: translateX(-100%) rotate(45deg);
  }
}

4 . Cipta kesan telinga anjing

Satu lagi cara biasa untuk menggunakan elemen pseudo CSS sebelum dan selepas ialah mencipta kesan telinga anjing. Sebagai contoh, pada tajuk halaman utama tapak web, kita boleh menggunakan elemen pseudo sebelum dan selepas untuk mencipta kesan telinga anjing Kodnya adalah seperti berikut:

Kod HTML:

<h1>Welcome to My Website</h1>

<.>Kod CSS:

h1{
  position: relative;
  text-align: center;
  color: #FFF;
  background-color: #0084FF;
  padding: 20px;
  margin: 0;
}
h1:before, h1:after{
  content: "";
  position: absolute;
  bottom: -20px;
  border: 20px solid transparent;
}
h1:before{
  border-top-color: #0084FF;
  left: 0;
}
h1:after{
  border-top-color: #0084FF;
  right: 0;
}

Di atas adalah beberapa kegunaan elemen pseudo CSS sebelum dan selepas. Sama ada anda menambah awalan dan akhiran pada teks, mencipta butang gelangsar atau mencipta kesan telinga anjing, elemen pseudo CSS sebelum dan selepas boleh menambah beberapa elemen visual baharu pada tapak web anda. Dengan cara ini anda boleh menukar gaya dan reka letak tanpa menambah kod HTML, menjadikan tapak web anda lebih menarik secara visual.

Atas ialah kandungan terperinci Perbincangan mendalam tentang penggunaan elemen pseudo CSS sebelum dan selepas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!