はじめに
この実験では、CSS プログラミングを探求し、テキストのないリンクをスタイリッシュにする方法を学びます。具体的には、:empty と :not 疑似クラス、および content プロパティと attr() 関数を使用して、リンクの URL を ::before 疑似要素に表示します。この実験が終了するとき、Web ページ内のリンクの外観を操作する方法をより深く理解しているでしょう。
テキストのないリンクをスタイリッシュにする
VM には既に index.html と style.css が用意されています。
テキストのないリンクのリンク URL を表示するには、このようなリンクを選択するために :empty 疑似クラス、テキストのあるリンクを除外するために :not 疑似クラス、および content プロパティと attr() 関数を組み合わせて、リンク URL を ::before 疑似要素に表示します。以下はコードの例です：
<a href="https://30secondsofcode.org"></a>
a[href^="http"]:empty::before {
content: attr(href);
}
右下隅の「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080 タブを更新して Web ページをプレビューできます。
まとめ
おめでとうございます！「テキストのないリンクをスタイリッシュにする」実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。