This question already has answers here:
How to change the style of the title attribute inside an anchor tag?
(10 answers)
Closed 6 years ago.
I am trying to apply style for title attribute of a span tab. The span is already using a style class i want to use the same class to apply my style is it possible ?
<span class="span_class" title="100"> hello </span>
.span_class {
}
I want to change the background colour of the title.
the question is answered here: How to change the style of Title attribute inside the anchor tag?
alternatively, you should use a javascript library (there are several of them) like https://jqueryui.com/tooltip/
I think you should also add the aria-label attribute to ensure accessibility.
Can you use scss to have the same style? Something like that?
#mixin myclassforspan{
background:blue;
color:white;
padding:10px 2px;
}
.span_class[title] {
#include myclassforspan;
&:hover{
position: relative;
&:after{
#include myclassforspan;
content: attr(title);
position: absolute;
left: 0;
top: 100%;
z-index: 20;
}
}
}
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 2 years ago.
This question is purely hypothetical; I don't intend to use the methods discussed here. The intention is to learn more about CSS selectors.
Consider an HTML page containing a checkbox. If the checkbox is selected, the background of the body element is red. Otherwise it is blue.
Is this possible to achieve using currently usable selectors in CSS?
Here are the constraints:
No javascript anywhere
No divs overlaying the entire page. It must be the body element's background property.
No future CSS selectors like :has. Ideally the method should be demonstrable in a Codepen.
Here's one way. It satisfies all your conditions, but it does use a pseudo-element so it sort of cheats on the "It must be the body element's background property" requirement since the body's background color is set, but the red color comes from the pseudo element:
input:checked::before {
content: '';
position: absolute;
background: red;
z-index: -1;
top:0;
right:0;
bottom:0;
left:0;
}
body {
margin: 0;
background: blue;
}
<input type="checkbox">
This question already has answers here:
How to change the style of the title attribute inside an anchor tag?
(10 answers)
Closed 6 years ago.
I'm trying to change the pop-up of an element using CSS, yet it doesn't work.
name {
background-color: #00BBFF;
color: white;
}
<button title="name">Test</button>
Looks like you want to use the attribute selector https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
button[title="name"] {
background-color: #00BBFF;
color: white;
}
<button title="name">Test</button>
Unfortunately, the tooltip style cannot be changed in any browser.
I'd suggest you implementing your own with CSS (add a hidden span or some other element with the tooltip and show it on button:hover) or JS (nicer as you could set a delay before is shown).
This question already has answers here:
Add line break to ::after or ::before pseudo-element content
(8 answers)
Closed 6 years ago.
I am using the css after:: selecter to display texts. What I want to do is simply add a tag before this display. Cant get it to work
H2::after {
content: " <br>posted by me";
font-size: 14px;
}
<H2>Hello</H2>
you cannot add html tags inside content:"" of pseudo-element.
use display:block on the :after pseudo-element and you will get the desired result . see below :
H2::after {
content:"posted by me";
display:block;
font-size: 14px;
}
<H2>Hello</H2>
let me know if it helps
or you could use JQ if you REALLY want to include HTML tags
$("h2").after("<span style='color:red;font-style:italic'>posted by me</span>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<H2>Hello</H2>
If you're looking to break the "::after" onto a new line why not add a "display:block" rule?
h2::after{
content:"posted by me";
font-size:14px;
display:block;
}
This question already has answers here:
CSS :after not adding content to certain elements
(5 answers)
Closed 8 years ago.
Is it possible to append text to images using the ::after pseudo-selector?
img[src="images/interface-zoom-buttons.png"]::after {
content: "these are the zoom buttons";
}
The desire is to use the selector to provide a caption (other styling will be applied to the content of the selector) for images that get used over and over again in multiple HTML documents.
In the above example the image appears correctly and you can see that the appropriate CSS has been applied, but the content (supplied by the selector) is not seen in the output.
An img tag can not have child elements. Because img is a void element and its content model never allows it to have contents under any circumstances.
::after creates a pseudo element as the last child of its parent.
So img::after will not work ultimately because the browser will not allow it based on definition.
What you can do is to contain the img in a container and have ::after on the container.
Demo http://jsfiddle.net/x2za91jw/
HTML
<div class="container">
<img src="http://www.gazette-ariegeoise.fr/IMG/jpg/test.jpg" />
</div>
CSS
.container {
position: relative;
}
.container::after {
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
content:"these are the zoom buttons";
}
This question already has answers here:
Does :before not work on img elements?
(16 answers)
Closed 7 years ago.
Trying to make information about image below it. But have A problem... Pseudo element is not visible..
<img info="hey guys" src="http://i024.radikal.ru/1211/4c/809c7c2dfa74.jpg">
<div info="I'm working, but I'm inside the block"></div>
div {
height: 100px;
margin: 10px;
background: yellow;
}
div[info]::after, img[info]::after {
content: attr(info);
display: block;
margin: 3px;
color: black;
font-style: italic;
}
Jsfiddle DEMO
Thanks.
img elements can't have pseudo elements, because they can't have children—::before is inserted within the element. It would look like this:
<img><before></img>
Or at least itt isn't defined by the spec
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.
Pseudo elements are appended/prepended to the element's contents. Since an <img> (and an <input> for instance) has no contents, it cannot have pseudo elements applied on it.