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