Hi, Is it possible in CSS to Bold all characters before a set character for example ":" on a line For example Bold:Not Bold Bold:Not Bold Bold:Not Bold I do not want to edit the HTML file at all just the CSS. Cheers
You would use the :before pseudo element here is some code I whipped up. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> p:before { content:'Bold'; font-weight:bold; } </style> </head> <body> <p> text owns.</p> </body> </html> Code (markup): This code would do what you want. Hope this gives you some insight. Note however that I do not believe this code works in ie7 or below. I think IE8 so far has allowed this to work but I don't think it allows images to be the content. I may be wrong but that is what I think happens with IE. If it does work in IE then hey post here and let me know. ~eric
Hey eric.r, Thanks for the code. The problem is the CSS and the content must be seperate. Also Bold is just an example the actual word before ":" will vary each time and it may be multiple lines of text before another ":" where I want to bold again. Bold:Not Bold Not Bold Not Bold Not Bold Not Bold Not Bold Not Bold Random Bold Words:Not Bold Sorry if I wasn't clear. I'm not 100% sure this can be done without assigning a format/style to the words, but it seems reasonable enough. At the very least it could be done with some plugin or script. But can it be done it pure CSS? w3schools.com/css/css_pseudo_elements.asp Is similar to what I want to do, but instead of first letter or first line I want it to be first word.
Put white-space: normal and use the :first-line pseudo class. Then wrap that in a span. I think that would work. Not sure. ~eric
Yes I was considering a span. I will get this sorted. I do not think CSS allows this to be done without a span p:first-letter { } Code (markup): Also the external CSS, just attach link rel stylesheet to the head. I think the only way to do this - strong or p span { font-weight: bold; color:#FFF; font-size: 10px; }
Thanks for the ideas, did you get a working solution? I looked around the net a good bit and there are people back in 2000 saying a first-word should be implemented in the next version of CSS lol.
I'm fairly confident CSS can't do it. Unfortunate its exactly the kind of thing CSS should solve. The HTML has to have spans inserted everywhere.