CSS 疑似要素の使用前後の詳細な議論-フロントエンドQ&A-php.cn

CSS 疑似要素の使用前後の詳細な議論

PHPz

リリース： 2023-04-06 16:51:46

オリジナル

4190 人が閲覧しました

前後の CSS 疑似要素は、HTML 要素の前後にスタイルを追加する方法です。これら 2 つの CSS 疑似要素は、主に装飾要素を追加したり、テキストに追加のスタイルを追加したりするために使用されます。この記事では、CSS 疑似要素の前後での使用方法を検討し、いくつかの実用的な例を示します。

1. 前後の CSS 疑似要素の使用法

構文は次のとおりです:

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

ログイン後にコピー

このうち、セレクターは挿入する必要のある要素セレクターを指します。装飾要素の前後は擬似要素です。上記の構文では、content 属性の値を使用してコンテンツ (テキスト、画像など) を挿入します。さらに、前後の疑似要素では、色、背景、境界線などの他のスタイル属性も使用できます。

2. テキストの接頭辞と接尾辞を追加する

CSS 疑似要素の前後に使用する最も一般的な用途の 1 つは、テキストに接頭辞と接尾辞を追加することです。たとえば、以下に示すように、疑似要素 before を使用してテキストの前に小さなアイコンを配置できます。

HTML コード:

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

ログイン後にコピー

CSS コード:

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

ログイン後にコピー

このようにして、リスト項目の前に小さなアイコンを追加できます。

疑似要素 after を使用して、テキストの後にコンテンツを追加することもできます。たとえば、次のコードを使用して、HTML テーブルの各テーブルセルに「/」記号を追加できます:

HTML コード:

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

ログイン後にコピー

CSS コード:

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

ログイン後にコピー

３、スライダーの作成

前後のCSS擬似要素もスライダーの作成に使用できます。たとえば、スライドアニメーションを備えたスライダーボタンを作成できます。コードは次のとおりです。

HTML コード:

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

ログイン後にコピー

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. 犬を作成します。 -ear 効果

CSS 疑似要素を前後に使用するもう 1 つの一般的な方法は、ドッグイヤー効果を作成することです。たとえば、Web サイトのトップタイトルで、前後の疑似要素を使用して犬の耳効果を作成できます。コードは次のとおりです:

HTML コード:

<h1>Welcome to My Website</h1>

ログイン後にコピー

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

ログイン後にコピー

上記は、CSS 疑似要素の前後でのいくつかの使用法です。テキストにプレフィックスとサフィックスを追加する場合でも、スライダーボタンを作成する場合でも、ドッグイヤー効果を作成する場合でも、前後の CSS 疑似要素によって Web サイトに新しい視覚要素を追加できます。この方法では、HTML コードを追加せずにスタイルとレイアウトを変更でき、Web サイトをより視覚的に魅力的なものにすることができます。

以上がCSS 疑似要素の使用前後の詳細な議論の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。