この記事は人間が書きました
はじめに
こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。
「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca
擬似要素とは？
疑似要素は、要素の特定の部分にスタイルを適用するためのものです。::before と ::after は、CSS だけで HTML に存在しない要素を、要素の前や後ろに追加できる非常に強力な機能です。
-
::before：要素の内側の、コンテンツの直前に要素を追加する -
::after：要素の内側の、コンテンツの直後に要素を追加する
重要なルール：content プロパティ
::before と ::after を使う際には、必ず content プロパティを指定する必要があります。このプロパティで、追加する要素の中身を定義します。
content には、テキストや画像、あるいは空文字（""）などを指定できます。
作成したコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フロントエンド1000本ノック 0035</title>
<style>
.decorated-link::before {
content: "🔗";
}
.decorated-link::after {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: blue;
}
</style>
</head>
<body>
<main>
<h1>擬似要素</h1>
<a href="#" class="decorated-link">サンプルリンク</a>
</main>
<footer>
<p>Copyright 2025</p>
<p>フロントエンド1000本ノック</p>
</footer>
</body>
</html>