This depends on what you’re actually trying to do. If you simply wish to apply styles to a :before pseudo-element when the a element matches a pseudo-class, you need to write a:hover:before or a:visited:before instead. Notice the pseudo-element comes after the pseudo-class (and in fact, at the very end of the entire selector). Notice also … Read more
Yes you can! Just tested this and it works great, this is awesome! #test::before { content: url(path/to/your.svg); width: 200px; height: 200px; } Or if you prefer to put the SVG directly in the CSS: #test::before { content: url(“data:image/svg+xml,%3Csvg xmlns=”http://www.w3.org/2000/svg”%3E%3Ccircle cx=’100′ cy=’50’ r=”40″ stroke=”black” stroke-width=”2″ fill=”red”/%3E%3Cpolyline points=”20,20 40,25 60,40 80,120 120,140 200,180″ style=”fill:none;stroke:black;stroke-width:3″/%3E%3C/svg%3E “); width: 200px; … Read more
If it’s a problem with the not selector, you can set all of them and override the last one li:after { content: ‘ |’; } li:last-child:after { content: ”; } or if you can use before, no need for last-child li+li:before { content: ‘| ‘; }
:before and :after render inside a container and <input> can not contain other elements. Pseudo-elements can only be defined (or better said are only supported) on container elements. Because the way they are rendered is within the container itself as a child element. input can not contain other elements hence they’re not supported. A button … Read more
You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that: In HTML: <span>foo</span> In jQuery: $(‘span’).hover(function(){ $(this).attr(‘data-content’,’bar’); }); In CSS: span:after { content: attr(data-content) ‘ any other text you may want’; } If you want to prevent the ‘other text’ from showing up, you … Read more