How to style pseudo counter in CSS


Tags: html,css3,pseudo-element

Problem :

How do I change the font size of the counter in this example:

<style>
p
{
counter-increment: myIndex;
}

p:before
{
content:counter(myIndex);
}
</style>

Webpage content

<p>First make a variable (myIndex) and make it increase every time a p element occurs.</p>
<p>Then insert the counter in front of all p elements</p>
<p><b>Note:</b> For the counter property to work in IE8, a DOCTYPE must be declared.</p>

http://www.w3schools.com/cssref/tryit.asp?filename=trycss_content_counter



Solution :

Simply set the font-size for the :before psuedo.

Demo Fiddle

p {
    counter-increment: myIndex;
}
p:before {
    content:counter(myIndex);
    font-size:30px;
}

    CSS Howto..

    How to implement fluid font size using pure CSS

    How to remove all CSS property inside a class, but don't remove class using jQuery

    how to get image to show up to the left of panel (both in same row)

    CSS: How to make link colour the same as parent div

    How is Bootstrap's `nav` class making anchors move to their own line

    How to use Grunt while continually compressing css / javascript

    How to create a simple social sharing dropdown menu in CSS/HTML

    CSS: How to position divs 2 by 2

    How to float menu list elements

    How to make a div align with a specific td on the page?

    How do I get the boxes to align underneath each other when the screen shrinks (responsive)

    How to remove inherited styles using jQuery?

    How do I create a full-width bar on a web page?

    How can I get a jquery css container to pop up letting the user know data was successfully entered?

    Showing responsive menu link that is not shown in regular navigation menu

    How to draw a Normal Distribution Curve (Bell curve) using CSS and JavaScript?

    How to get @media to take precedence over normal styling

    how to put links in one line [CSS]

    How to change the Fill color of an SVG path via CSS

    how do i avoid this title from overflowing?

    multiple CSS classes, how they work and WHY do it this way? [duplicate]

    How to get all child elements using an xpath selector?

    How to position footer correctly with css?

    How can I divide the screen to these divs in css?

    Bootstrap - How to make text wrap around an image on small devices?

    How to properly apply CSS style to H elements in ordered list

    How to enable overflow scrolling within a Semantic Ui Grid?

    How dynamically aligning text on website

    Show content only in printing page not in browser page using CSS or javascript

    How to change the opacity of image on hover using css