Hello,
#test { /* width of 60em */
max-width: 60em;
width: 100%
}
#test:before { /* full-screen width */
width: 100%;
}
No matter what I try, the ma-width applies to the :before part.
Is there a way to avoid that?
Hm, not that I know of (but that’s not saying much!). If you set the before content to position: absolute, you can make it wider by setting the width in ems etc, but that’s not really what you were asking:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
<style media="all">
* {margin:0; padding: 0;}
#test {
max-width: 20em;
position: relative;
}
#test:before { /* full-screen width */
width: 60em;
content:" ";
position:absolute;
border-top: 5px solid red;
}
</style>
</head>
<body>
<p id="test">Text. Text. This is text. Text. Text. This is text. Text. Text. This is text. Text. Text. This is text. Text. Text. This is text. Text. Text. This is text. Text. Text. This is text. Text. Text. This is text. Text. Text. This is text. Text. Text. This is text. Text. Text. This is text. Text. Text. This is text. </p>
</body>
</html>
What’s the actual point of this? Perhaps there’s a better way.
As Ralph said it would be better if we knew what you were trying to do so that we could give a more precise answer.
When you use before you would basically end up with a structure like this:
<div id="test"><span class="before"></span>original content in the div</div>
Whatever you can do to the span above would be the same as you could do when using :before.
Have a look at this example from a css quiz that shows what can be done using :before.
You could make a border extend to the viewport as in my demo above but I don;t think you can make a background keep track with the layout height though without adding a wrapping div to hide the overflow
<!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">
#test { /* width of 60em */
max-width: 60em;
width: 100%;
margin:auto;
background:red;
}
#test:before {
content:" ";
border-bottom:70px solid #000;
right:0;
left:0;
width:100%;
position:absolute;
margin-left:-1px;
display:block;/* strange but true*/
z-index:-1;
}
</style>
</head>
<body>
<div id="test">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan</p>
</div>
</body>
</html>
The thing to remember about :before and :after is they are not actually before or after the element they are applied to, they are before/after the CONTENT of the tag it’s applied to.
It’s one place where scripting is superior – as in scripting you have beforeBegin, afterBegin, beforeEnd and AfterEnd. as possibilities for insertAdjacentHTML
:before == afterBegin, :after == beforeEnd. There are no CSS equivalents to beforeBegin or AfterEnd.
so of course the max-width is applied… as…
<div id=“something”></div>
with
#something:before
is nearly the same thing as saying:
<div id=“something”><span class=“before”></span></div>
Which is exactly what the expression to replace elements using insertAdjacentHTML does.
Which is why BEFORE is a really BAD name for it.
silly question, could you target it’s parent instead?
Whats happening simpler to explain that what has been said.
basically :before and :after CREATE a new inline “element” as the FIRST or LAST child, respectively , of the class (or ID or tag) depending how the elude is written.
IMAGINATION TIME…
what you have to VISUALIZE is that
.test:after{ content:“”;/* the rule is NOT applied if no content attribute is specified!! */} makes
<div class=“test”>
<p>This is class test text test. Say that three times realy fast!</p>
<p>Line two for clarity’s sake</p>
</div>
into this
<div class=“test”>
<p>This is class test text test. Say that three times realy fast!</p>
<p>Line two for clarity’s sake</p>
<span class"fromAFTERrule"></span>
</div>
by default, the element is INLINE ( that’s why I chose a span to visualize it), thus it has no actual width or height other than that of what you may have put in the content:; attribute … but anyway you could style a span you can style this pseudo element.
OK, so it now we are back to basic CSS. a child element’s 100% width is = to the with of it’s parent. 
( this is why you are running into difficulties.
w/o scripting ( DS60’s solution, as always clever!) does an “inverse” and in a sense leads me suggest that you could use scripting to WRAP your class…
beforeBegin : "<div class=“postwrap”>"or AfterEnd: “<\div>”
but that seems very risky (DOM and cascade wise), involves scripting and it’s just not very standard.
You could have a wrap that is 100% of the screen width , with relative position and then give the .test:after position;absolute; that will solve the 100% width issue, but will take that element out of the flow… which may be a deal breaker;
then again… as long as we are wrapping elements…
You could wrap the element, and give the :after to the wrapper, instead of the element. kinda a clumsy solution/guess, but this is assuming you COULDNT target the parent to begin with!!!
Uhm… not quite right… You’ve got afterEnd in wrong spot.
if the markup was:
<div class=“postWrap”>SomeContent</div>
The scripting hooks for insertAdjacentHTML would be (putting them in {} to distinguish their spots)
{beforeBegin}<div class=“postwrap”>{afterBegin}SomeContent{beforeEnd}</div>{afterEnd}
With CSS :before == afterBegin and :after == beforeEnd.
Which is why the only reason I mentioned using scripting is that it’s how the expression support to fake before/after in legacy IE works.
zoom:expression(
runtimeStyle.zoom=1,
insertAdjacentHTML('afterBegin','<span class="before"></span>')
);
I wasn’t really suggesting it as a solution for modern browsers – more just to compare.