Don’t know if this is at all possible or not with CSS but wanted to pose the question with these constraints:
Cannot change or manipulate existing HTML
Not creating new markup using HTML
So my predicament is creating pseudo tag and then trying to manipulate just a part of the content property being applied to the pseudo tag as seen below. Say for example, I wish to style only the word ‘DUMMY’ bold red.
dummytag:before {
content:'This is DUMMY text.';
}
You can add content to an element via the content property but you can’t add a new element as you would need javascripot for that.
If you want to style the generated text to look like an element then just style it.
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p:before {
content:"Only good browsers see this";
color:red;
font-size:200%;
display:block;
border:1px solid #000;
margin:0 0 20px;
}
</style>
</head>
<body>
<p>This is some text</p>
</body>
</html>
Of course you should never use this method to add real content as that should be in the html from the start. It can be used to enhance the experience for good browsers but check browser support.
What I am saying is that it is not in the HTML and my constraints are that I cannot create or apply new markup (HTML) to the existing markup. I’m using a proprietary CMS which utilizes the HTML from a website and adds custom classes and id’s to the markup. Adding new HTML into the mix after the CMS has interpreted it will cause the CMS to error. (if you’re wondering what kind of CMS it is… let’s just say it’s proprietary and I can’t specify… it just is and I have to use it as a worker)
And I do understand that I can just style the content however I was wondering if I could just style sections of the content.
Taking your example:
p:before {
content:"Only good browsers see this";
color:red;
font-size:200%;
display:block;
border:1px solid #000;
margin:0 0 20px;
}
If I wanted just the word ‘good’ to be blue rather than the above red; is there a way to target just that section within the content property?
Ah ok, I misunderstood that you just wanted to style the one word in the content that you added. No, I’m afraid that you can’t do anything like that unfortunately.
You could cheat but it’s not usable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">
p {
position:relative;
}
p:before {
content:"Only good browsers see this";
color:red;
font-size:200%;
display:block;
border:1px solid #000;
margin:0 0 20px;
}
p:after {
content:"good";
color:blue;
font-size:200%;
position:absolute;
top:1px;
left:2.2em;
margin:0 0 0 1px;
}
</style>
</head>
<body>
<p>This is some text special</p>
</body>
</html>
Interesting way to go about it. Overlaying what is already there with absolute positioning. The problem I would experience with that unfortunately is when there is a change in browser width and I get any text wrapping.
Well, seems like I’ll just have to keep it all unified when it comes to styling the :before properties for now. They can live with that.
No Problem. I can’t think of any useful way to get what you want so it looks like you are stuck with what you are doing already (unless someone else has a better idea ;))
