Designers - some help with CSS - GoFuckYourself.com

donnie · 11-01-2011, 09:08 AM

I am trying to make my titles with h2 tag a bit nicer and I want to have a dot before any text. Something like this:

• Hello

In my CSS I have this:

h2
{
font-family: Times New Roman, serif;
font-size: $theme_headline_size_large;
letter-spacing: -1px;
margin-bottom: 10px;
color: #ffffff;
text-transform : capitalize;
font-weight: normal;
}

Is it possible to add something so I get that dot before the text? And to make it even more complicated I would like the dot to be of a different color than rest if the text

AaronM · 11-01-2011, 09:15 AM

http://lmgtfy.com/?q=css+bullet+point

UniqueD · 11-01-2011, 09:18 AM

you could put the h2 inside an unordered list
<ul>
<li>
<H2>HEYOO</h2>
</li>
</ul>

The Truth Hurts · 11-01-2011, 09:19 AM

Code:

h2:before {content: "? ";}

MetaMan · 11-01-2011, 09:20 AM

put the colored bullet point as an image. then move the text over with left padding. then possiton the bullet point in the vertical of the text.

The Truth Hurts · 11-01-2011, 09:26 AM

to change the color.. which i missed.

Code:

h1:before {color:red; content: "• ";}

Overload · 11-01-2011, 09:29 AM

Quote:

Originally Posted by The Truth Hurts

Code:

h2:before {content: "? ";}

ehh, shudnt that be

Code:

h2:before {content: "&middot; ";}

???

donnie · 11-01-2011, 09:33 AM

Quote:

Originally Posted by The Truth Hurts

to change the color.. which i missed.

Code:

h1:before {color:red; content: "? ";}

Taht worked great! Thank you so much for this!

V_RocKs · 11-01-2011, 09:35 AM

I saw this coming...

The Truth Hurts · 11-01-2011, 09:44 AM

Quote:

Originally Posted by Overload

ehh, shudnt that be

Code:

h2:before {content: "&middot; ";}

???

that would just show · literally..

alternative to using the • and a space in there would be

content: "\2022\A0";

11-01-2011, 09:08 AM	#1
donnie Confirmed User Join Date: Jan 2003 Posts: 1,630	Designers - some help with CSS I am trying to make my titles with h2 tag a bit nicer and I want to have a dot before any text. Something like this: • Hello In my CSS I have this: h2 { font-family: Times New Roman, serif; font-size: $theme_headline_size_large; letter-spacing: -1px; margin-bottom: 10px; color: #ffffff; text-transform : capitalize; font-weight: normal; } Is it possible to add something so I get that dot before the text? And to make it even more complicated I would like the dot to be of a different color than rest if the text

11-01-2011, 09:19 AM	#4
The Truth Hurts Hb17uaaldwM Industry Role: Join Date: Nov 2002 Location: In Your Skull Posts: 15,150	Code: h2:before {content: "? ";}

11-01-2011, 09:26 AM	#6
The Truth Hurts Hb17uaaldwM Industry Role: Join Date: Nov 2002 Location: In Your Skull Posts: 15,150	to change the color.. which i missed. Code: h1:before {color:red; content: "• ";}

11-01-2011, 09:15 AM	#2
AaronM Too lazy to set a custom title Industry Role: Join Date: Oct 2001 Location: ┌∩┐ ◣_◢ ┌∩┐ Posts: 46,909	http://lmgtfy.com/?q=css+bullet+point

11-01-2011, 09:18 AM	#3
UniqueD Confirmed User Industry Role: Join Date: Aug 2004 Location: Barcelona Posts: 1,022	you could put the h2 inside an unordered list <ul> <li> <H2>HEYOO</h2> </li> </ul>

11-01-2011, 09:20 AM	#5
MetaMan I AM WEB 2.0 Industry Role: Join Date: Jan 2003 Posts: 28,682	put the colored bullet point as an image. then move the text over with left padding. then possiton the bullet point in the vertical of the text.

11-01-2011, 09:35 AM	#9
V_RocKs Damn Right I Kiss Ass! Industry Role: Join Date: Dec 2003 Location: Cowtown, USA Posts: 32,391	I saw this coming...