Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I insert text before an item with CSS?

Tags:

css

xml

I'm sorry, I'm a complete newbie to CSS and I'm trying to create a custom display for an xml file with CSS.

My question is: how can I display a certain text before a certain element, e. g. "Project:" before each element?

I tried like that with ":before" but that does not seem to do the trick

ThinkingRock
{
background-color: #ffffff;
width: 100%;
}

project
{
:before{content:"Projekt:";};
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
description
{
color: #FF0000;
font-size: 20pt;
}
notes
{
color: #0000FF;
font-size: 20pt;
}
id, created, parent, topic, context, state, done, priority, modified, purpose, success, brainstorming, processed
{
display: block;
color: #000000;
margin-left: 20pt;
}

The xml file use is this one: http://www.trgtd.com.au/index.php?option=com_docman&task=doc_download&gid=16&Itemid=71
I've only added the first line <?xml-stylesheet type="text/css" href="thinkingrock.css"?>

like image 937
MostlyHarmless Avatar asked Jan 18 '12 03:01

MostlyHarmless


1 Answers

:before is a pseudo-selector itself, so it needs its own style block, like below:

project:before {
  content:"Projekt:";
}
project {
  display: block;
  margin-bottom: 30pt;
  margin-left: 0;
}

fiddle: http://jsfiddle.net/wNEt3/

fiddle using your xml and css: http://jsfiddle.net/pRwMT/1/

Btw, http://htmldog.com/ is a great place to go for HTML & CSS tutorials, and they kindly point out W3schools inconsistencies, if you've visited there first :D

like image 106
danjah Avatar answered Sep 23 '22 00:09

danjah