[CSS] - content

content 总是和伪类::before和::after一起用。在元素的前面或者后面插入指定内容。

String

//css
.first-name::before {
  content: "Name: ";
}

//html
<div class="first-name">Jelly</div>

//result
Name: Jelly

Counter

//css
p {
    counter-increment: myIndex;
}
p:before {
    content: counter(myIndex)". ";
}

//html
<p>First line.</p>
<p>Second line.</p>
<p>Third line.</p>

//result
1. First line.
2. Second line.
3. Third line.

Attribute

//css
a:before {
    content: attr(href);
}
p:after {
   content: attr(newAttr);
}

//html
<a href="https://www.url.com">(this is a url)</a>

<p newAttr="- new attribute">paragraph </p>
<p><b>Note:</b> This is alos a paragraph</p>

result

Image - url(url)

//css
p:before {
    content: url(smiley.gif);
}

//html
<p>Air Booking</p>
<p>Car Booking</p>
<p>Lookup</p>

result

none

//csss
p:before { 
    content: "* ";
}

p#second:before { 
    content: none;
}

//html
<p>first paragraph</p>
<p id="second">second paragraph</p>
<p>third paragraph</p>

//result
* first paragraph
second paragraph
* third paragraph

open-quote and close-quote

Note： close-quote必须和open-quote一起用。

//css
p:before {
    content: open-quote;
}

p:after {
    content: close-quote;
}

//html
<p> They </p>
<p> I </p>
<p> You </p>

//result
" They "
" I "
" You "

//css
p:before {
    content: open-quote;
}

//html
<p> They </p>
<p> I </p>
<p> You </p>

//result
" They 
' I 
' You 

//css
p:after {
    content: close-quote;
}

//html
<p> They </p>
<p> I </p>
<p> You </p>

//result
 They 
 I 
 You 

no-open-quote and no-close-quote

//css
p:before {
    content: open-quote;
}

p:after {
    content: close-quote;
}

p.hometown:before {
    content: no-open-quote;
}

p.hometown:after {
    content: no-close-quote;
}

//html
<p> They </p>
<p class="hometown"> I </p>
<p> You </p>

//result
" They "
 I
" You "