HTML and CSS Reference
In-Depth Information
Figure 7-19.
The styled button, including its highlighted state
Using :before
The final step in this view is to retrieve the vote count from the
data-count
attribute. This is accomplished using
the
:before
pseudo-element and the
content
rule, which lets you pass in an attribute name to be displayed in the
pseudo-element. Use the
data-count
attribute, move it to the left, and position it vertically at the center using
the following code (to be added to the bottom of the “Questions View” section in
main.css)
:
#questions li:before {
content: attr(data-count);
position: absolute;
left: 0;
top: 50%;
margin-top: -.5em;
}
Save and reload; now the vote count is displayed on the left of each question (see Figure
7-20
).
Search WWH ::
Custom Search