Impossible to Add Pseudo Element to Canvases

Impossible to add pseudo element to canvases?

Replaced elements (such as canvas and img) do not currently work with pseudo-elements.

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

Source

Pseudo element :after not displaying

Canvas can't have an ::after. You can wrap it in a <div> and give that an ::after though.

CSS - SVG in a pseudo element with Color changing capabilities

This is easy if you flip the logic - instead of adding color on the hover - think of it as removing color when you are not hovering.

With CSS filters - you can convert your svg to greyscale - meaning that a color image / SVG is rendered as a black and white image. Then on hover - stop the filter / conversion and your svg will have its actual color.

Note that this only works with one color change - you cannot have different paths go different colors etc - but by reversing the color logic you get a black and white svg that turns colorful on hover.

The following div has a border - just to show the dimensions (and I would probably do the svg as the background image of the div rather than the ::before - but I left it as requested. The SVG is iniitally shown as black and on hover over the div - the svg turns red.... magic :)

div {
  height: 160px;
   width: 300px;
   border: solid 1px blue;
   position: relative
}

div::before {
  content: url('data:image/svg+xml;utf8,<svg version="1.1" id="" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink"  style="" xml:space="preserve"><path d="M150 0 L75 200 L225 200 Z" fill="red"></path></svg>');
  display: block;
    -webkit-filter: grayscale(100);
    filter: grayscale(100);
}

  
div:hover:before{
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}   

<div></div>

How can I use the CSS pseudo-element :before{ content: '' } to affect an option element?

The ::before and ::after pseudo-elements actually prepend/append a child node to the element, so this will not work on any element that cannot contain child nodes.

It would be (roughly) the equivalent of doing:

<option><span>sandy - </span>beach</option>

If you want to update the text value, you will need to use JavaScript.

Is it possible to have an :after pseudo element on a button?

This should now work on all up to date browsers.

To get it to work, you need to add content:""; in your after.

How could I use pseudo-element :after :before conditionally

In general it is not possible to select elements based on their next sibling.

In your specific case, you can use ul li a:not(:last-child)::after, because it happens that your anchors that are not followed by an <ul> element are also the last child element.

Is there a way to have the equivalent of multiple :before and :after pseudo-elements in CSS?

You can actually achieve the icon in your image using just ::before and ::after, if you set position:relative on <div class="icon">, and position the pseudo-elements absolutely:

http://jsfiddle.net/RMs2L/3/

.icon {
    position: relative;
    width: 160px;
    height: 160px;
    background: #666;
}

.icon::before,
.icon::after {
    content: '';
    position: absolute;
    width: 120px;
    left: 20px;
}

.icon::before {
    height: 80px;
    top: 20px;
    background: #fff;
}

.icon::after {
    height: 20px;
    bottom: 20px;
    background: #00b9ae;
}

(Not tested in IE.)

But you’re quite right that for icons with more than three parts, just ::beforeand ::after wouldn’t cut it.

If your icons are only made up of areas of flat colour (or gradients), then multiple gradient backgrounds might work for icons with more elements:

http://jsfiddle.net/RMs2L/5/

.icon {
    position: relative;
    width: 160px;
    height: 160px;
    background-color: #666;
    background-image: linear-gradient(to bottom, #fff 0%, #fff 100%)
                    , linear-gradient(to bottom, #00b9ae 0%, #00b9ae 100%)
                    , linear-gradient(to bottom, #000 0%, #000 100%);
    background-size: 120px 40px
                   , 120px 20px
                   , 120px 20px;
    background-position: 20px 20px
                       , 20px 80px
                       , 20px 120px;
    background-repeat: no-repeat;
}

You could even do the same thing with one gradient background, using sharp gradient boundaries:

http://jsfiddle.net/RMs2L/6/

background-image: linear-gradient(to bottom, 
                  #fff 0px, #fff 40px,
                  rgba(0,0,0,0) 40px, rgba(0,0,0,0) 60px,
                  #00b9ae 60px, #00b9ae 80px,
                  rgba(0,0,0,0) 80px, rgba(0,0,0,0) 100px,
                  #000 100px, #000 120px);
background-size: 120px 120px;
background-position: 20px 20px;

And, of course, you can use actual background image files as well as, or instead of, gradients.

As you can see, the CSS is much more fiddly if you try to make icons out of gradient backgrounds, as compared to styling actual elements or pseudo-elements. It might make for clearer code if you suck it up and put in the HTML elements, and style them using :nth-child, as suggested elsewhere.

---

Related Topics