XML/CSS Style/pseudo class
Add content to pseudo class
File: Data.xml
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="Style.css"?>
<document>
<page>
<paragraph3>This content is within paragraph 3</paragraph3>
<paragraph4>This content is within paragraph 4</paragraph4>
</page>
</document>
File: Style.css
paragraph1:first-letter {
float:left;
font-size:24pt;
font-style:italic;
font-weight:bold;
padding-right:4px;
}
paragraph2:first-line {
text-transform:uppercase;
font-weight:bold;
}
paragraph3:before {
font-weight:bold;
text-transform:uppercase;
content:"Text before paragraph 3 - ";
}
paragraph4:after {
content: url(lions.jpg);
}
paragraph3, paragraph4 {
display: block;
}
before pseudo class
File: Data.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Style.css"?>
<PROJECTDB>
<TOPICAREA>
<PROJECT>
<PROJECTTITLE>title</PROJECTTITLE>
<DEVELOPER>developer</DEVELOPER>
<CONTACT>address</CONTACT>
</PROJECT>
</TOPICAREA>
</PROJECTDB>
File: Style.css
DEVELOPER:before {
content: "text";
display: block
}
PROJECTTITLE {
display: block
}
pseudo class:before
File: Data.xml
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="Style.css" ?>
<purchaseOrder orderID="x1129001">
asdf
</purchaseOrder>
File: Style.css
purchaseOrder:before {
font-family:arial, verdana, sans-serif;
font-size:28px;
font-weight:bold;
content:"Purchase Order Number: " attr(orderID);
}