ブラウザのステータスバーを見ずに PDF のリンクをクリックして心臓が止まりそうになることがあるので, Stylish に PDF の断り書きがなくても注意を喚起するようなスタイルシートを書き込んだ.
a[href$=".pdf"]:after {
-moz-border-radius: 7px;
margin-left: 3px;
padding: 2px;
content:"PDF";
font-size: 90%;
font-weight: bold;
color:#FFFFFF;
background: #DC3703;
}CSS3 の内容マッチの属性セレクタの後方一致を使って, URL の後ろが .pdf に一致したら適用する. content プロパティで「PDF」の文字を表示し, :after 擬似要素で a 要素の後方に置く. 実際に使用すると下のようになる.
ブラウザが CSS3 に対応しているとユーザースタイルシートを書くときに便利だ.