I make userstyles, in other words, third party CSS or custom CSS, and I'm replacing text with content property and the before and after pseudo elements. The problem is, to completely hide the original text, I have to set the original element's font-size to 0. This also hides things set in place with the hover pseudo element. I was going to just apply the hover properties to my before pseudo element, but then I would have to use 2 pseudo elements, which I don't think is possible. But, I'm not sure. Here's a sample similar to my code.
a.class[href="link"] {
font-size: 0;
visibility: hidden;
hover:
}
a.class[href="link"]:hover {
background-color: black;
}
a.class[href="link"]:before {
font-size: 16px;
visibility: visible!important;
content: "This text replaced what showed before";
}
a.class[
Related
Is there a way to only target the direct text within a <h1>-Tag?
Here is an example on what I want to do:
<h1>I want to select this text with a css selector <small>but not this text</small></h1>
This does not seem to work:
h1:not(small)
Is it even possible?
h1:not(small)
Your selector h1:not(small) doesn't work because it says this:
Target all h1 elements that are not small elements.
It's that same as using the h1 selector by itself.
h1 :not(small)
You would have been closer with h1 :not(small), which says:
Target all descendants of an h1 except small elements.
Boom! Exactly what you want.
Except that text contained directly inside an element (i.e, text with no tags around it) becomes an anonymous element. And anonymous elements are not selectable by CSS.
h1 :not(small) {
color: orange;
}
<h1>This text is contained directly inside the container. It is not selectable by CSS. It is an anonymous element. <small>This text is inside a small element</small></h1>
<hr>
<h1><span>This text is contained in a span. It is selectable by CSS</span> <small>This text is inside a small element</small></h1>
CSS Parent Selector
For the small element to be excluded it would have to identify itself as a child of the h1.
But there is no parent selector in CSS.
Solution: Two selectors
You need two selectors to make this work:
The first sets the style on the parent.
The second overrides the first on the child.
h1 {
color: orange;
}
h1 > small {
color: black;
}
<h1>I want to select this text with a css selector <small>but not this text</small></h1>
More Information
Targeting text nodes with CSS
Is it possible to style anonymous flex items explicitly?
Is it possible to select elements not preceded by text?
This is the closest it gets to retaining the style without any css that has been implemented by the parent div. This feature hasn't been fully integrated in all browsers, but it should work for some. Hope, it helps.
Browser support -
What's being done here?
The small tag is retaining its original CSS without being affected by the other styles. You can apply this on any of the child elements whose style you want to preserve.
small {
all: initial;
* {
all: unset;
}
}
h1 {
color: #ff0000;
}
<h1>I want to select this tex with a css selector <small>but not this text</small></h1>
Apply styles to h1 however you want, then, revert those changes in small, for example, if you only want to change the color you would use this code;
h1 { color: red; }
h1 small { color: initial; }
Or, if you have multiple style changes;
h1 {
color: red;
font-weight: italic;
text-transform: uppercase;
}
h1 small {
color: initial;
font-weight: initial;
text-transform: initial;
}
Please note that the initial CSS value can be used on every browser, except for IE and Opera Mini. View this page for more information
Is it possible to have multiple :before pseudos for the same element?
.circle:before {
content: "\25CF";
font-size: 19px;
}
.now:before{
content: "Now";
font-size: 19px;
color: black;
}
I am trying to apply the above styles to the same element using jQuery, but only the most recent one is applied, never both of them.
In CSS2.1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.)
As a result, when you have multiple :before rules matching the same element, they will all cascade and apply to a single :before pseudo-element, as with a normal element. In your example, the end result looks like this:
.circle.now:before {
content: "Now";
font-size: 19px;
color: black;
}
As you can see, only the content declaration that has highest precedence (as mentioned, the one that comes last) will take effect — the rest of the declarations are discarded, as is the case with any other CSS property.
This behavior is described in the Selectors section of CSS2.1:
Pseudo-elements behave just like real elements in CSS with the exceptions described below and elsewhere.
This implies that selectors with pseudo-elements work just like selectors for normal elements. It also means the cascade should work the same way. Strangely, CSS2.1 appears to be the only reference; neither css3-selectors nor css3-cascade mention this at all, and it remains to be seen whether it will be clarified in a future specification.
If an element can match more than one selector with the same pseudo-element, and you want all of them to apply somehow, you will need to create additional CSS rules with combined selectors so that you can specify exactly what the browser should do in those cases. I can't provide a complete example including the content property here, since it's not clear for instance whether the symbol or the text should come first. But the selector you need for this combined rule is either .circle.now:before or .now.circle:before — whichever selector you choose is personal preference as both selectors are equivalent, it's only the value of the content property that you will need to define yourself.
If you still need a concrete example, see my answer to this similar question.
The legacy css3-content specification contains a section on inserting multiple ::before and ::after pseudo-elements using a notation that's compatible with the CSS2.1 cascade, but note that that particular document is obsolete — it hasn't been updated since 2003, and no one has implemented that feature in the past decade. The good news is that the abandoned document is actively undergoing a rewrite in the guise of css-content-3 and css-pseudo-4. The bad news is that the multiple pseudo-elements feature is nowhere to be found in either specification, presumably owing, again, to lack of implementer interest.
If your main element has some child elements or text, you could make use of it.
Position your main element relative (or absolute/fixed) and use both :before and :after positioned absolute (in my situation it had to be absolute, don't know about your's).
Now if you want one more pseudo-element, attach an absolute :before to one of the main element's children (if you have only text, put it in a span, now you have an element), which is not relative/absolute/fixed.
This element will start acting like his owner is your main element.
HTML
<div class="circle">
<span>Some text</span>
</div>
CSS
.circle {
position: relative; /* or absolute/fixed */
}
.circle:before {
position: absolute;
content: "";
/* more styles: width, height, etc */
}
.circle:after {
position: absolute;
content: "";
/* more styles: width, height, etc */
}
.circle span {
/* not relative/absolute/fixed */
}
.circle span:before {
position: absolute;
content: "";
/* more styles: width, height, etc */
}
I've resolved this using:
.element:before {
font-family: "Font Awesome 5 Free" , "CircularStd";
content: "\f017" " Date";
}
Using the font family "font awesome 5 free" for the icon, and after, We have to specify the font that we are using again because if we doesn't do this, navigator will use the default font (times new roman or something like this).
You can also use an image/icon plus text in the content field
e.g.
p.album-title::after {
content: url('https://...camera-icon-blue.png') ' View >';
display: block;
...;
}
In ::after css set content:'any text' and add backgroun-image with svg text from external svg file url(anySvgText.svg) or inline svg code url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200"><text x="0" y="15" fill="black" style="font-family: tahoma;">any second text</text></svg>')
Also you can use only svg instead content value. but you must set empty string (content: '') to display a ::after style
.circle:before {
content: "\25CF";
font-size: 19px;
color: red;
width: 200px;
display: block;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200"><text x="0" y="15" fill="black" style="font-family: tahoma;">Now</text></svg>');
background-position-x: 15px;
}
<div class="circle"></div>
I have a button followed by a pseudo element. The button displays 'next' and the pseudo element displays '>'. This is used for pagination.
I have hidden the button but made the pseudo element visible by using css properties
button{
visibility: hidden;
}
button::pseudoElement{
visibility: visible;
}
Now the button is hidden and element is visible. It is also clickable. It works in chrome,safari and ie. But it does not click on firefox. What do I change?
EDIT
This hack worked
button{
color: transparent;
}
button::pseudoElement{
color: black;
}
Any better approach?
Pseudo elements aren't actually inserted before or after the element itself. They are inserted as the first/last child element. So if you hide the "parent" element, their ::before/::after pseudo elements will be hidden as well.
In your case, I would just do the old text-indent: -9999px or font-size: 0 trick on the parent element and reset the pseudo element (text-indent: 0).
With your color: transparent solution, the element will retain its size. With the text-indent trick it's just using the space the pseudo element needs.
I have a html page which has a div looking like this:
<div class="get-this"> blah blah </div>
I have a before pseudoelement on the div and I am trying to apply CSS style only to the div which will not be applicable to the pseudo element.
.get-this:not(::before) {
padding-top:2px;
}
The style is applied to the entire div. IS it possible to restrict the style only to the div and not the pseudo element?
This is a straightforward use of the cascade.
The CSS cascade is intended to enable you to apply general styles to more general selectors and overriding styles to more specific selectors.
Hence:
.get-this {
padding-top:2px;
}
.get-this::before {
padding-top:0;
}
Working Example:
.paragraph-one {
color: red;
}
.paragraph-two {
color: blue;
}
.paragraph-one::before {
content: 'Paragraph One: ';
}
.paragraph-two::before {
content: 'Paragraph Two: ';
color: green;
}
<p class="paragraph-one">This is paragraph one. It is red.</p>
<p class="paragraph-two">This is paragraph two. It is blue.</p>
<p>The <code>::before</code> pseudo-element preceding Paragraph Two <em>isn't the same color</em> as the rest of Paragraph Two, because, further down the cascade, an overriding style has been declared for the more specific <code>.paragraph-two::before</code> selector.</p>
if you already applied all of your div element to have before or after css they would require you to type content: ""; in order to show style applied to DOM:before or DOM:after
Which means if you set content to none it won't show that.
to overwrite your div style you can simply do
.get-this:before {
content: none;
}
But I would avoid applying before or after properties to all of your div element of your application. div element is often used on many situation, therefore you will run into problem you are now facing on every div element. which mean writing css to overwrite css. that's just not a good practice in most of case.
Also if your DOM element that has before, after its position is related with parent DOM, that being said, if your DOM's padding, margin, positioning, size changes will effect to before or after of that DOM
I've been looking around Google but can't find a CSS way to increase the height of the background of selected text.
For example the background of the selected text in the Atom editor is noticeably higher than the right one:
Since Atom is made with HTML/CSS, I wonder if there's a combination of CSS which can achieve this result?
This is a bit hacky but you could do it by using a pseudo element (like ::before) that has a content of non-breaking space and some padding to create the line-height illusion:
body {
background: #000;
color: #FFF;
}
::selection {
background: red;
}
p::before {
content: "\00a0";
padding: 10px 0;
display: inline-block;
}
This is default text
<p>This text has a pseudo element</p>
jsFiddle: https://jsfiddle.net/azizn/8bmj4dm1/
Caveat: this will require wrapping each line in a tag. You could probably use JavaScript to automatically wrap each line in a tag for this to work with multi-line content.