Styling w/pseudo elements. can I make them responsive

HTML & CSS
1

Wanted to set a title w/a pseudo element.
but it doesn’t seem to respond to the resizing the browser.
is it capable of that or just give up and use an image or a another way?
thx
D

2

The answer is: It depends.

GENERALLY SPEAKING. pseudo elements can be styled just like any other elements ( tho, to date, they don’t accept CSS3 transitions).

Think of a pseudo element as a SPAN tag around the content:‘’; This is you have control of the <pseudo></pseudo>, but not it’s contents, per se.
for example:

if you had

:pseudo{ content:'hi am a pseudo element'; color:red;  font-size:200%; }

you would get red text twice as big as normal… just as if you had styled a span the same way.

BUT
if you had

:pseudo{ content: ulr(someIMG.jpg) ; width:500px; display:block; }

the actual image WONT be 500px, it’s the pseudo element ITSELF that will be 500px. ( the same as if you had an IMG inside a SPAN with the rule : span{ width:500px; display:block; }

hopefully that sheds some light on the subject.

PS,
if you gave your pseudo element fixed dimension, and your container is fluid… you will have overflow problems at some point, pseudo element or not.

3

Hi,

If you are adding pseudo content to an element (which I assume you are doing with :before or :after) then the content you add will be add to that container and bound by the confines of that container unless as Ray has said you are fixing its width in some way or positioning it outside the bounds of its container.

Here’s a rough example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
div {
	border-radius:5px;
	border:5px solid #000;
	background:#ccc;
	float:left;
	width:20%;
	margin:0 2%;
	position:relative;
	min-height:100px;
}
div:before {
	content:" Title goes here";
	position:absolute;
	top:0;
	right:0;
	left:0;
	padding:5px 0;
	background:green;
	color:#fff;
	text-align:center;
}
div:after {/* ignore this rule -it just creates a square box */
	content:" ";
	display:block;
	margin-top:100%;
}
</style>
</head>

<body>
<div></div>
<div></div>
<div></div>
</body>
</html>