Hi...
I have been researching some css rules, and came up with na alternative to
style list bullets, without adding any new HTML element.
See the trick:
ul {
padding: 0;
list-style-type: none;
counter-reset: my-list; /* start a counter */
}
ul li:before {
/* keep the counter left of the list but right aligned
may not be needed if you don't mind about alignment */
display: block;
float: left;
width: 30px;
padding: 0 10px 0 0;
text-align: right;
/* add as many styles as needed */
font-weight: bold;
color: red;
content: counter(my-list) ". "; /* add the counter, or bullets, or
anything */
counter-increment: my-list /* increment the counter */
}
All about generated content and counters in CSS can be found at
http://www.w3.org/TR/CSS2/generate.html.
__
Paulo Diovani Gonçalves
[email protected]
http://diovani.com
De: siva manian [mailto:[email protected]]
Enviada em: sábado, 28 de novembro de 2009 02:26
Para: [email protected]
Assunto: Re: [Design with CSS 2684] Re: list style bullet bold
ok.. let try this one if u feel that is non-semantic..
apply this style
ol#bullet li{
font-weight:bold;
}
ol#bullet li span{
font-weight:normal;
and in the html..
<ol id="bullet">
<li>Bullet<span>bullet</span></li>
</ol>
On Sat, Nov 28, 2009 at 7:57 AM, jkronika <[email protected]> wrote:
Yeah, the suggestion from @smartcookie and @slvamanian is probably
your best bet. It also adds non-semantic HTML, but in a way that is
much more manageable than large tables with hard-coded numbering.
On Nov 27, 7:29 am, siva manian <[email protected]> wrote:
> hi,
> use this..
> <ol>
> <li style="font-weight:bold;">hi
> <span style="font-weight:normal;">hi</span>
> </li>
> </ol>
>
> its working..
>
>
>
> On Fri, Nov 27, 2009 at 5:24 PM, smartcookie <[email protected]> wrote:
> > This is what I do if I want the number to be a different style than
> > the content. You can do this for colors too.
>
> > ol li {font-weight:bold}
> > ol li span {font-weight:normal}
>
> > <ol>
> > <li><span>This is normal text</span></li>
> > </ol>
>
> > Its a little extra wok but it works.
>
> > On Nov 21, 2:50 am, dnagel <[email protected]> wrote:
> > > Can anyone explain how I would set the font to bold only on the bullet
> > > (decimal)? The content of the LI should remain font-weight:normal
>
> > --
> > --
> > You received this because you are subscribed to the "Design the Web with
> > CSS" at Google groups.
> > To post: [email protected]
> > To unsubscribe: [email protected]
>
> --
> -------------
> thanks & regards
> Sivasubramanian J
--
--
You received this because you are subscribed to the "Design the Web with
CSS" at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
--
-------------
thanks & regards
Sivasubramanian J
--
--
You received this because you are subscribed to the "Design the Web with
CSS" at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
--
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
