ページにテキストコンテンツを追加する方法を確認(rèn)しましたが、畫像、屬性値、カウンター、または空の文字列を追加して、これら2つの追加要素にアクセスすることもできます。

畫像を追加すると、url()を使用して背景畫像の追加に似ています。ここでは、url()屬性の値としてcontentを使用します。私は実際に、contentの空の文字列を作成して、背景畫像を使用して擬似要素にアクセスすることを好みます。これは、background-position、background-repeat、background-sizeなどの一般的に使用されるすべてのプロパティが利用可能であるため、畫像をより強(qiáng)化します。

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

content

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

コンテンツを生成する最後の特別なケースは、挿入カウンター変數(shù)の値です。これは、法的條件の複雑なリストの番號(hào)付けに非常に役立つことがわかりました。

ここに一連のタイトルがあり、以下は一連のネストされたリストです。各章のタイトルに番號(hào)が付いていて、各リスト項(xiàng)目は各章の子番號(hào)です。

h2

a[href]:not([href*="#"]):after {
  content: attr(href);
}

ページ上の各要素には2つの「余分な」要素があり、好みに応じてスタイルを整えることができるため、さまざまな複雑な形狀を作成できます。

ボックスから始めて、

h2 {counter-increment: section;}
ul {counter-reset: item;}
li {counter-increment: item;}

h2:before {
  content: counter(section) " - ";
}
li:before {
  content: counter(section) "." counter(item);
}

で配置することにより作成されます。半円の色に一致する境界を使用して、シンボルの2つの円形エンドポイントを作成できます。あなたが私に尋ねると、それはかっこいいです。 border-radius border-bottom私は擬似要素を使用するのが好きです。 position:absolute

css pseudo-elementsについてよく尋ねる質(zhì)問

さまざまな種類のCSS擬似要素は何ですか？

CSS擬似要素は、要素の特定の部分をスタイリングするために使用されます。 ::before、::after、::first-letter、::first-line、::selection、::backdrop、::placeholder、::before、::after、::first-letterなど、いくつかのタイプの擬似要素があります。各擬似要素は、要素の異なる部分を標(biāo)的とします。たとえば、::first-lineおよび

および::beforeが使用されます。 ::after

および::before pseudo-elementsを使用する方法は？ ::after content

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

a[href]:not([href*="#"]):after {
  content: attr(href);
}

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}