Enable Support for CSS3 ::Outside Pseudoelement

Enable support for CSS3 ::outside pseudoelement

You are correct: no browser in existence has implemented any of the new features in the ancient CSS3 Generated and Replaced Content module, so you won't be able to try the proposed pseudo-elements. In fact, they're planning to rewrite the module itself, so the current working draft should be considered abandoned, and unfortunately there's no telling the fate of these proposed features.

Anyway, I'm not aware of any JS polyfills available for these pseudo-elements either, so you're out of luck on writing selectors using ::outside in your CSS.

The closest you can get is to wrap actual elements around the elements for which you want to style with a container... this is cheaply accomplished with, for example, jQuery's .wrap() or .wrapAll().

So, instead of doing this:

p::outside {
    display: block;
    border: 3px solid #00f;
}

You'd do this:

$('p').wrap('<div class="outside-p" />');

/* 
 * Notice that you can't select only .outside-p that contains p:only-child,
 * so you'll have to come up with esoteric class names.
 */
.outside-p {
    border: 3px solid #00f;
}

jsFiddle preview

There are some caveats to this, however:

• This is largely dependent on the DOM; you won't be able to wrap certain elements around others depending on the circumstances. Even if you can, those wrapper elements may end up interfering with the behavior or even the styling of the actual parent elements.

  For example, it prevents you from using the child selector in cases like this:

  article > p
  

  Where you intend to jQuery.wrap() those p elements, as then those wrapper elements will break the parent-child relationship between article and p.

• The spec states that ::outside pseudo-elements, like ::before and ::after, are supposed to inherit styles from the elements that generate them. If you use JavaScript/jQuery to add wrappers, those wrappers will inherit styles from their parent elements and not the ones they're wrapping. This has never been a problem when polyfilling ::before and ::after, as they're intended to be inserted as child elements anyway, following inheritance rules normally.

CSS container pseudo element?

The old CSS3 Generated and Replaced Content Module had a proposal for an ::outside pseudo-element which seems close to what you describe, but there are no implementations, and the module itself is slated for a rewrite... someday.

In other words, there's currently no way to achieve this using only CSS, and there probably won't be any for a while.

Of course, there are ways to emulate wrapping elements using JavaScript to manipulate the DOM, but that's just about the only way you can achieve this besides hardcoding in the extra markup. Some trivial jQuery methods with respect to the fabled ::outside pseudo-element are described here:

Enable support for CSS3 ::outside pseudoelement

How to display the :after content outside element

I believe CSS content is considered part of the object against which it was rendered. You could make the argument that :after should have been named :append.

For your case you can try putting an extra element inside span.my:

<span class="my"><span>Boxtext</span></span>
span.my span { ... }
span.my:after { ... }

Or styling the content specifically.

span.my:after { 
    content:            " text that is supposed to come after the box";
    background-color:   white;
    position:           absolute;
    margin-left:        10px;
}

CSS allow before/after element out of div when parent element has overflow

To make both parent divs scrollable you can set overflow: auto; on the parent.

I changed your ::after to ::before so that it aligned with your text, and not next to it. Then you can change your absolute positioning to position: fixed; to make it look like the right side but still have the scrolling ability.

.container {
  display: flex;
}

.parent {
  width: 100%;
  height: 50px;
  background: black;
  margin: 10px;
  border-left: 20px solid #fff;
  padding-left: 20px;
  margin-left: -23px;
  background-clip: content-box;
  overflow-x: hidden;
}

p {
  color: white;
  position: relative;
  margin-left: -10px;
  background-clip: content-box;
  padding-left: 10px
}

p::after {
  position: absolute;
  content: '';
  height: 2px;
  background: green;
  width: 2.5rem;
  left: -1px;
  top: 1rem;
}

<div class="container">

  <div class="parent">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div>

  <div class="parent">
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
    <p>Text</p>
  </div

</div>

CSS :after pseudo element not showing up on img?

As answered in this question.

Using before and after psuedo-elements with the img tag does not work in most browsers, by design.

Image tags are self-closing (<tag />) tags because they contain no content. Since they do not contain any content, no generated content can be appended (::after) or prepended (::before) to the existing content.

The article linked above lists two work-around solutions. The CSS work-around is very hackish in nature, while the jQuery solution is much more elegant, but depends on both Javascript being enabled and the jQuery library being included.

Css pseudo-element ::before(2); :before and ::before

The CSS spec on content describes all three syntaxes.

• :before -- outdated syntax for pseudo elements. Use if older browser support is needed such as IE8. IE9 supports the new syntax. It also seems like iOS Safari does not support the new syntax
• ::before -- new pseudo element syntax. This is equivalent to ::before(1)
• ::before(n) -- used to create multiple before elements that can be before other ::befores. Details are in the same spec.
• As far as I can tell, no browser supports this.
  
  • http://jsfiddle.net/535Rf/

CSS ::before ::after pseudo-element of class not working

If you're going to absolutely position the pseudo elements, you need to give their parent a position value, same as with non-pseudo elements.

Just add:

.menuheader {
    position : relative;
}

Here is an updated version of your JSFiddle (the only changes are adding the above code and making the background of the pseudo elements a solid color for demonstration): http://jsfiddle.net/99Aq8/1/

Can I use a :before or :after pseudo-element on an input field?

:after and :before are not supported in Internet Explorer 7 and under, on any elements.

It's also not meant to be used on replaced elements such as form elements (inputs) and image elements.

In other words it's impossible with pure CSS.

However if using jquery you can use

$(".mystyle").after("add your smiley here");

API docs on .after

To append your content with javascript. This will work across all browsers.

---

Related Topics