I have following HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:before pseudo-class and images</title>
<style type="text/css" media="screen">
img {
display: block;
width: 640pt;
}
img:before {
content: "Test";
}
</style>
</head>
<body>
<img src="http://andreygromov.name/picture/flower/flower4.jpg" alt="Ваза с цветами" />
</body>
</html>
:before will not appear for image, but it does for any div.
Why?
Update:
I found this explanation in W3C:
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.
Update 2:
I forget to mention - i need to visualize "alt" attribute of image with CSS.
img:before {
display: block;
content: attr(alt);
background-color: #333;
/* etc. */
}
Considering the specification you quoted, I guess this is a case where you have to wrap the image in an element and apply :before on that.
EDIT:
Considering, that the alt attribute is for alternative text and basically should confer the same information as the image does, wouldn't that mean you are duplicating the information for the user?
How about putting the information you want to display in the title attribute of the surrounding element and displaying that?
Example:
<style type="text/css" media="screen">
.image:before {
content: attr(title);
}
.image img {
display: block;
width: 640pt;
}
</style>
<div class="image" title="Information here"><img ... ></div>
Related
Is there any possibility how to target HTML tag <title> in CSS for content: ""?
It would be pretty neat to control both the <h1> and the title of the page by one attribute.
I've tried something like
title::before{
content: "Hello world"
}
If this won't be possible, what other solution might be appropriate?
Thanks!
You sure can, in fact, as all elements in a HTML document are plain <tags> they can be made visible and get id, class, style (inline or style block) or any other selector attribute, whether global or custom. Even contenteditable and make them runtime editable (won't work on <script>, though).
Below a snippet displaying <title> with pseudo selectors.
...And if you really want to dig into showing runtime styles, links and javascript check out this Codepen I created some time ago. Beware, not for beginners. Hit the bottom/right [show styles] button in the pen and see the magic happen...
<html>
<head>
<title>Document Title, quite long some we can forse a line break (well, on smaller windows anyway...)</title>
<style>
/* Because it is hidden by default */
head {
display: block;
}
title {
display: block; /* default hidden too */
width: 100%;
min-height : 2rem;
line-height: 2rem;
hyphens: auto;
cursor: pointer; overflow: hidden;
font-size: larger; text-align: center;
background-color: hsl(45,100%,50%);
}
title::before { content: 'Before: ' ; font-weight: bold }
title::after { content: ' :The End!'; font-weight: bold }
body { background-color: Gainsboro }
</style>
</head>
<body>
<p>Some regular paragraph element</p>
</body>
</html>
I'm trying to use the :before selector to place an image over another image, but I'm finding that it simply doesn't work to place an image before an img element, only some other element. Specifically, my styles are:
.container
{
position: relative;
display: block;
}
.overlay:before
{
content: url(images/[someimage].png);
position: absolute;
left:-20px;
top: -20px;
}
and I find that this works fine:
<a href="[url]" class="container">
<span class="overlay"/>
<img width="200" src="[url]"/>
</a>
but this does not:
<a href="[url]" class="container">
<img width="200" src="[url]" class="overlay"/>
</a>
I can use a div or p element instead of that span, and the browser correctly overlays my image over the image in the img element, but if I apply the overlay class to the img itself, it doesn't work.
I'd like to get this working because that extra span offends me, but more importantly, I've got about 100 blog posts that I'd like to modify, and I can do this in one go if I could just modify the stylesheet, but if I have to go back and add an extra span element in between the a and img elements, this will be a lot more work.
Unfortunately, most browsers do not support using :after or :before on img tags.
http://lildude.co.uk/after-css-property-for-img-tag
However, it IS possible for you to accomplish what you need with JavaScript/jQuery. Check out this fiddle:
http://jsfiddle.net/xixonia/ahnGT/
$(function() {
$('.target').after('<img src="..." />');
});
Edit:
For the reason why this isn't supported, check out coreyward's answer.
The before and after pseudo-selectors don't insert HTML elements — they insert text before or after the existing content of the targeted element. Because image elements don't contain text or have descendants, neither img:before or img:after will do you any good. This is also the case for elements like <br> and <hr> for the same reason.
I found a way to make this work in pure css:
The I'm just fake content-method
a pure CSS method to enable img:after.
You can check out the CodePen: I'm just fake content or see the source.
Source & Snippet
img {
/* hide the default image */
height:0;
width:0;
/* hide fake content */
font-size:0;
color:transparent;
/* enable absolute position for pseudo elements */
position:relative;
/* and this is just fake content */
content:"I'm just fake content";
}
/* initial absolute position */
img:before,
img:after {
position:absolute;
top:0;
left:0;
}
/* img:before - chrome & others */
img:before {
content:url(http://placekitten.com/g/250/250);
}
/* img:before - firefox */
body:not(:-moz-handler-blocked) img:before {
padding:125px;
background:url(http://placekitten.com/g/250/250) no-repeat;
}
/* img:after */
img:after {
/* width of img:before */
left:250px;
content:url(http://lorempixel.com/350/200/city/1);
}
<img
alt="You are watching the ~ I'm just fake content ~ method"
/>
Browser support
✓ Chrome 10+
✓ Firefox 11+
✓ Opera 9.8+
✓ Safari
No support
⊗ Internet Explorer 8 / 9
Please test in other browsers
Due to the nature of <img> being a replaced element, document styling doesn’t affected it.
To reference it anyway, <picture> provides an ideal, native wrapper that can have pseudo-elements attached to it, like so:
img::after,
picture::after{
content:"\1F63B";
font-size:larger;
margin:-1em;
}
<img src="//placekitten.com/110/80">
<picture>
<img src="//placekitten.com/110/80">
</picture>
Here's another solution using a div container for img while using :hover::after to achieve the effect.
The HTML as follows:
<div id=img_container><img src='' style='height:300px; width:300px;'></img></div>
The CSS as follows:
#img_container {
margin:0;
position:relative;
}
#img_container:hover::after {
content:'';
display:block;
position:absolute;
width:300px;
height:300px;
background:url('');
z-index:1;
top:0;
}
To see it in action, check out the fiddle I've created. Just so you know this is cross browser friendly and there's no need to trick the code with 'fake content'.
The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as img, or to br elements.
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
I think the best way to look at why this doesn't work is that :before and :after insert their content before or after the content within the tag you're applying them to. So it works with divs or spans (or most other tags) because you can put content inside them.
<div>
:before
Content
:after
</div>
However, an img is a self-contained, self-closing tag, and since it has no separate closing tag, you can't put anything inside of it. (That would need to look like <img>Content</img>, but of course that doesn't work.)
I know this is an old topic, but it pops up first on Google, so hopefully this will help others learn.
This one works for me:
html
<ul>
<li> name here </li>
</ul>
CSS
ul li::before {
content: url(../images/check.png);
}
::after may be used to display the fallback image of an image
See the example below, first 2 img tags are point to the broken urls. But the second one displays the fallback image instead of the default broken logo from the browser. However, I'm not sure this's any practical, I find it kind of tricky to get it to work right.
img {
position: relative;
display: inline-block;
width: 300px;
height: 200px;
vertical-align: top;
}
img:not(:first-child)::after {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
content: "<" attr(alt) "> NOT FOUND";
border: 1px dashed #999;
background: url(https://cdn.dribbble.com/users/1012566/screenshots/4187820/topic-2.jpg) center/100%;
}
<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100x75" alt="logo">
In these cases it is preferable to use the <figure> tag, which allows you to manage the css in an optimal way
This way you can use after just on the figure
Example
<div class="exemple">
<figure>
<img src="img1.jpg"/>
</figure>
<figure>
<img src="img2.jpg"/>
</figure>
</div>
<img> is a replaced element and using :before or :after pseudo-elements on it works if the image fails to load and otherwise it does not work. If you intend to have a fallback in case of image load failure,please refer to https://stackoverflow.com/a/71478688/14204452
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
#image img{
display: inline-block;
max-width: 50%;
}
#image::after {
position: absolute;
top: 0;
content: url('https://img.icons8.com/plasticine/100/000000/about.png');
}
</style>
<title>img before</title>
</head>
<body>
<a id="image" href="">
<img src="https://static.remove.bg/remove-bg-web/5c20d2ecc9ddb1b6c85540a333ec65e2c616dbbd/assets/start-1abfb4fe2980eabfbbaaa4365a0692539f7cd2725f324f904565a9a744f8e214.jpg">
</a>
</body>
</html>
Try this code
.button:after {
content: ""
position: absolute
width: 70px
background-image: url('../../images/frontapp/mid-icon.svg')
display: inline-block
background-size: contain
background-repeat: no-repeat
right: 0
bottom: 0
}
I tried and found a simpler method to do so. Here is the HTML:
<img id="message_icon" src="messages2.png">
<p id="empty_para"></p>
What I did was place an empty <p> tag after my image tag. Now I will use p::before to show the image and position it according to my needs. Here is the CSS:
#empty_para
{
display:inline;
font-size:40;
background:orange;
border:2px solid red;
position:relative;
top:-400px;
left:100px;
}
#empty_para::before
{
content: url('messages.png');
}
Try it.
Try ::after on previous element.
Just give the Image "position: relative" and it will work
Hey guys I have an external CSS and HTML file, I am currently trying to link the two, more specifically I am trying to link the ids that are titleImage titleLink and webpageTitle. Unfortunately the CSS for does not seem to register. I have tried switching the position of the type and the id such as instead of this, #titleImage img that did not work. Is it an issue with me having multiple external CSS references? Also this is not all the code there is more to each but the ones listed below are the parts that I focus on the most. I have also tried removing the a, img, h1
So could someone explain why titleImage titleLink and webpageTitle styles are not registering on my localhost?
UPCDATE: I have made change to reflect everyone's comments below and the site is still not updating with the new css as listed in the code below in style.css
style.css
div#titleImage {
position:absolute;
top:0px;
right:0em;
}
a#titleLink { text-decoration: none}
h1#webpageTitle {
position:relative;
}
HTML file
<head>
<link href='http://fonts.googleapis.com/css?family=Alef:400,700|Roboto+Slab' rel='stylesheet' type='text/css'>
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/css/sticky-footer-navbar.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet" type="text/css">
<link href="/css/lightbox.css" rel="stylesheet">
</head>
<body>
<section class="container">
<header class="row" id="header">
<!-- Begin grid -->
<div class="col-sm-9"><!--Top of the page-->
<h1 id="webpageTitle">McMaster SEClub</h1>
<div id="titleImage"><img src="/img/logo.gif" width=150 height=110></div>
</div>
The titleImage ID is for the <div> surrounding the image, not the image itself. At the moment, you are trying to find an element with a #titleImage selector inside an image tag.
For the titleLink, the ID is the element, so you can do this instead:
a#titleLink { ... }
However, you'd typically only have one ID on a page, so you could just target the title link by doing this:
#titleLink { ... }
The webpage title should be working as intended. However, I'd still recommend just using the ID. An element with relative positioning doesn't really appear different unless you've given it some style declarations:
#webpageTitle {
position: relative;
top: 10px;
left: 10px;
}
Hope that helps.
Remove the space in the selector.
img #titleImage means: any element with id titleImage and an <img> element as ancestor
img#titleImage means: an <img> element with id titleImage. That's what you want.
get rid of the space between the tag type and the id. So and make the rules:
img#titleImage {
position:absolute;
top:0px;
right:0em;
}
a#titleLink { text-decoration: none}
h1#webpageTitle {
position:relative;
}
What you have is saying "the element with an ID titleImage that id a child of an image tag, etc.
Since you are using IDs, its not necessary to even include the tag type (a, img) in front of the ids.
There shouldn't be any spaces in front of id so the code should be:
img#titleImage {
position:absolute;
top:0px;
right:0em;
}
a#titleLink { text-decoration: none}
h1#webpageTitle {
position:relative;
}
Remove all your capital letters, it doesn't work with capitals.
So instead of titleLink, and titleImage, write titlelink and titleimage.
That should fix it, it fixed it for me.
I have a custom <my-header> element that generates a link in shadow dom, which I'd like to have styled the same as the other links in the surrounding page. The old applyAuthorStyles attribute was a decent way to accomplish that, although it had its own problems. Now that applyAuthorStyles has been removed, the option I see is to have embedders define their global styles as:
a, * ^ a { color: green; }
and so on, which intrudes into the styles of elements that don't want the page's styles.
Is there a better way to do this?
I have some sample code at http://jsbin.com/yusox/1/edit and below. You'll only see the inconsistency if your browser has native Shadow DOM turned on (chrome://flags/#enable-experimental-web-platform-features in Chrome).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/platform.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/polymer/0.1.4/polymer.js"></script>
<title>Test</title>
<style>
body {max-width: 50ch;}
a { color: green; text-decoration:none; border-bottom: 1px blue dashed ; }
a:visited { color: darkgreen;}
</style>
<polymer-element name="my-header" noscript attributes="sec_num">
<template>
<style>
:host { display: block; }
header { font-weight: bold; margin: 20px 0; }
header::after { clear:both; display: block; content: " "; height: 0 }
</style>
<header>
<span class="section-number">{{sec_num}}</span>
<content></content>
<span style="float:right">[{{id}}]</span>
</header>
</template>
</polymer-element>
</head>
<body>
<my-header id="first.section" sec_num="1.2">Foo Bar Baz</my-header>
Polymer
</body>
</html>
intrudes into the styles of elements that don't want the page's styles.
Yes, intrusion will happen if you use *, so instead drive the style for your specific element:
a, my-header ^ a, body ^^ my-header ^ a { .. }
Fwiw, I don't think anybody is in love with this syntax, but that's the CSS that is supported today.
There are fancier solutions involving additional custom elements to manage dynamic, shared style-sheets, but it's a larger topic. Polymer will offer some kind of solution around these lines before long.
I have an img inside the a tag. When hovering on a, I want to change the image url. Is it possible with CSS?
<img src="img/takipet.png" alt="">
To directly answer your question, here’s one CSS-only approach:
HTML:
<div id="the-image-wrapper">
<img id="image-main" src="some/src">
<img id="image-alternate" src="some/other/src">
</div>
CSS:
#image-alternate {display: none;}
#the-image-wrapper:hover #image-main {display: none;}
#the-image-wrapper:hover #image-alternate {display: inline;}
You’re probably better off trying an alternate approach however, such as using a background image instead. Of course, it really depends on the application.
If you’re going the background-image route, you should take a look at using sprites.
You have few ways to do this.
If you prefer to use css you should replace with background-image property
a.some_class{
background-image:url(your_image_url);
background-repeat: no-repeat;
display: block;
height:image_height;
width:image_width;
}
a.some_class:hover{
background-image:url(your_image_url2);
}
Also you can use two images wrapped with Div. And show/hide needed on div hover.
With jQuery
$('a img.your_img_class').mouseover(function () {
$(this).attr("src", "hover_1_src");
})
.mouseout(function () {
$(this).attr("src", "old_src");
});
If it's a background image, you can do this:
.element:hover{
background-image:url(bg.jpg);
}
or even
.element:hover a{
background-image:url(bg.jpg);
}
If the a tag is within something else.
Change src="" attribute is can't change by Using CSS . Just Change with Javascript Or Jquery.
you can Just Control Styles By css .
Create Div Element And set background-image for it.
HTML Css:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#MyDiv{
width:100%;
height:100%;
background-image: url('Image.jpg');
}
#MyDiv:hover{
background-image: url('NewImage.jpg');
}
</style>
</head>
<body>
<div id="MyDiv" > </div>
</body>
</html>
Html Javascript:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="http://codeorigin.jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png" onmouseover="this.src='http://www.google.com/images/srpr/logo11w.png';" >
</body>
</html>