疑似要素
「疑似要素」というのは、HTMLには記述されていない仮想要素をCSSで追加する仕組みです。対象要素の前後に文字や装飾を施すことができるようになります。また、対象要素の一部分だけに適用させることも可能です。
仮想コンテンツ
::befor
要素の前に内容を付け足します。
<span class="arrow"> </span><a href="#after">after</a>
リンクの前の要素 <span> </span> の前に仮想要素を挿入します。
CSSで疑似要素を追加できるように、<span> にクラス属性を与えます。
.arrow {
}
.arrow::befor {
content: "▶"; /*必須プロパティです*/
color: #960;
font-size: 12px;
}
<span>ではなく、<div>、<p>で、 display: inline-block; を class に記述する方法もあります。
リンクを明示するために矢印などを付け足すことがあります。これらは、飾り要素ですから、CSSで付け足すのがWebページの運用に則っていることになります。つまり、HTMLソースを汚しません。
::after
要素の後ろに内容を付け足します。
<a href="#after" class="arrow">befor</a>
.arrow {
position: relative; /*表示位置の変更を可能にします*/
padding-left: 16px; /*疑似要素の表示用の空き*/
}
.arrow::after {
content: ""; /*必須です。表示する内容がない場合は、空要素にします*/
width: 0; /*以下、CSSで三角矢印を作ります*/
height: 0;
border-style: solid;
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #960;/*三角ここまで*/
position: absolute; /*以下、表示位置の指定*/
top: 0;
left: 0;
bottom: 0;
margin: auto;
}
::befor であっても、position の設定で 要素の前に矢印を表示させることができます。
利用するCSSプロパティ
content
値で指定した内容が付け加えられます。このプロパティを設定しないと何も表示されません。
position
位置指定の基準(方法)を設定するプロパティです。
border
枠の作成の機能を利用して、ここでは三角形を作っています。
要素の一部分
::first-letter
<p>Honestly, I don’t know why I’m so sad.<br>
It tires me out, and you say it tires you too.<br>
I don’t know how I got it, where it came from, or what it's made of.<br>
I still have to figure that out.<br>
This kind of foolish sadness makes me feel like I hardly know myself.</p>
p::first-letter {
font-size: 1.5em;
font-weight: bold;
font-family: Segoe Script;
color: green;
}
Honestly, I don’t know why I’m so sad.
It tires me out, and you say it tires you too.
I don’t know how I got it, where it came from, or what it's made of.
I still have to figure that out.
This kind of foolish sadness makes me feel like I hardly know myself.
文章の最初の一文字だけに装飾を加えることができます。
::first-line
<p> Artista español Pablo Ruiz Picasso (1881-1973) de abundante y variada obra, se desentendió desde muy jovan de todo influjo externo.</p>
p::first-line {
font-size: 1.5em;
font-weight: bold;
font-family: cursive;
color: green;
}
Artista español Pablo Ruiz Picasso (1881-1973) de abundante y variada obra, se desentendió desde muy jovan de todo influjo externo.
文章の最初の一行だけに装飾を加えることができます。