list style bullet bold

[dnagel]

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

[jkronika]

Unfortunately, there is no way I know of to set the weight of the
numbering... at least, not with standard ordered list elements. I
don't know for sure if numbering even changes weight if you set the
contents of LIs to bold. Even if there were a way to do so, it would
likely not be the same for all browsers anyway. The only reliable
method would be to use non-semantic markup with a table, or even a DL
(where the numbers are in DTs and the contents of the LIs shift to
DDs). Unfortunately, neither of those methods are very maintainable
for large lists, let alone the obvious drawbacks of lost semantics.

[smartcookie]

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.

[smartcookie]

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 <grandna...@gmail.com> wrote:

[siva manian]

hi,

       use this.. 

<ol>

<li style="font-weight:bold;">hi

<span style="font-weight:normal;">hi</span>

</li>

</ol>

its working..

--
--
You received this because you are subscribed to the "Design the Web with CSS" at Google groups.
To post: css-d...@googlegroups.com
To unsubscribe: css-design-...@googlegroups.com

--
-------------
thanks & regards
Sivasubramanian J

[jkronika]

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.

[siva manian]

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>

[Paulo Diovani]

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

pa...@diovani.com

http://diovani.com