I want to append a <br /> to a particular class. Using the :after pseudo class simply displays <br /> as text.
Is there a way to make this work?
It's internal for IE8 so browser issues aren't a problem. If I do
<span class="linebreakclass">cats are</span> brilliant
I want "brilliant" to appear on a new line.
You won't be able to render HTML tags but you can set style like this:
.needs-space:after {
content: " ";
display: block;
clear: both; /* if you need to break floating elements */
}
The main setting here is display: block; This will render :after content inside a DIV. And this pseudo element is supported by all latest browsers. Including IE. Saying this you should be aware of your users and their browsers.
You can use \A escape sequence, which will render as a newline:
.new-line:after {
white-space: pre-wrap;
content: "\A";
}
This method was mentioned in the CCS 2.1 Specification for the content property:
Authors may include newlines in the generated content by writing the
"\A" escape sequence in one of the strings after the 'content'
property. This inserted line break is still subject to the
'white-space' property.
It gets worse - the :after class doesn't even work in IE6 (and probably some other browsers too).
I think what you really want here is a margin on the bottom of the element, to provide spacing.
Simply
.myElement {
margin-bottom: 1em;
}
You can either add a custom icon from your assets, by doing simply ..
&:after {
content: url('~content/icons/drop-down-arrow.png');
}
Related
I have read a couple of articles about styling the placeholder of an input field using ::-webkit-input-placeholder in HTML5. It works perfectly, except for one thing.
If I try to increase the font-size to a value higher than 16px, the text gets "cut" at the bottom. This happens regardless of height and padding of the input itself. Does anyone know a way of avoiding this problem, either using pure CSS or javascript?
I have added a screenshot of two inputfields where the placeholders have an font-size of 20px
Jsfiddle: https://jsfiddle.net/bvwdg86x/
The input and its placeholder must have matching font styles
input {
display: block;
width: 400px;
padding: 0 20px;
}
input,
input::placeholder {
font: 20px/3 sans-serif;
}
<input type="text" placeholder="Example Input">
A note about placeholder accessibility
The screenshot included in the question shows the placeholder values being used as labels. This technique may be problematic for users of assistive technology and is considered an accessibility anti-pattern.
From W3C › WAI › Placeholder Research › Avoid use of placeholder values:
A placeholder attribute should not be used as an alternative to a label. The placeholder is a short hint intended to aid the user with data entry so it should not be identical to the label element. The placeholder may not be available to assistive technology and thus may not be relied upon to convey an accessible name or description -- it acts similar to fallback content.
See also:
Don't Use The Placeholder Attribute - Smashing Magazine
Placeholders in Form Fields Are Harmful - Nielsen Norman Group
Placeholder Attribute Is Not A Label! - Web Axe
Does using a placeholder as a label comply with WCAG 2? - Stack Overflow
Placeholder styles will not resize an input field and will not affect its box model. Add font-size to your input to fix the placeholder from getting cut off.
You also might consider adding placeholder styles for other browsers...
::-moz-placeholder {} /* Firefox 19+ */
:-moz-placeholder {} /* Firefox 18- */
:-ms-input-placeholder {} /* IE */
You have to add 'overflow: visible' to the placeholder in your css to get rid of the cropping.
::placeholder{
overflow: visible;
}
input {
width: 450px;
padding: 0px 15px;
}
input,
input::-webkit-input-placeholder {
font-size: 25px;
line-height: 4;
}
<input type="text" placeholder="My Cool Placeholder Text">
Meanwhile, the browser vendors implemented the ::placeholder CSS pseudo-element.
You can find the current state of browser compatibility on caniuse.com.
Currently (2019-04-29) there are following notes:
::-webkit-input-placeholder for Chrome/Safari/Opera (Chrome issue #623345)
::-ms-input-placeholder for Edge (also supports webkit prefix)
I've been trying to remove the line break that is caused by a break tag
I have come up with a solution that works in chrome, but not in firefox / IE11. Kind of curious if there is a CSS only solution that I could use in this situation that would work across most modern browsers:
HTML
<p>This line breaks in firefox,<br> but not chrome</p>
CSS
br {
display: inline-block;
content: " ";
width: 7px;
}
JSFiddle
Edit:
The break tag also needs to act like a space between the two words.
Using the following markup works cross browsers:
HTML
<div class="test">WORD<br> WITH<br> SPACE</div>
<div class="">WORD <br>WITH <br>SPACE</div>
CSS:
.test br{
display: none;
}
Use case is if you want to have a tag at a certain media query while still retaining spaces between the letters.
JSFIDDLE
I tried a few CSS methods and none of them are working in Firefox. I would suggest using a little bit of JavaScript to help you out.
Using jQuery, or just plain JS, insert a spacer element after each <br>
$('br').after('<span class="spacer"></span>');
The CSS:
br { display: none; }
.spacer { content: "\00a0"; }
I'm trying to port code over from using inline css to using a stylesheet and as I'm pretty much a total css noob I'm having trouble.
Most of the things I've moved over to external have worked fine, but I can't seem to get TD elements to use styles defined in the stylesheet. Here's an example:
<td class="text_right">...</td>
.text_right {
text-align: right;
}
Why doesn't that work?
That should work, however bear in mind that your <td> element should have some dimensions, otherwise it will be as wide as the content.
Check this for a demo
<td class="text_right"><a>...</a></td>
.text_right {
text-align: right;
width: 300px;
}
that should work , put you text in <a> tags
Try using !important . Like this ;
.text_right {
text-align: right !important;
}
if you still see it not aligned please check css for that element overridden rules (with chrome or opera) by right click and investigate
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'm having trouble understanding the behavior of the CSS :after property. According to the spec (here and here):
As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.
This doesn't seem to place restrictions on which elements can have a :after (or :before) property. However, it seems to only work with specific elements... <p> works, <img> doesn't, <input> doesn't, <table> does. I'm could test more, but the point is made. Note that this seems pretty consistent across browsers. What determines whether an object can accept a :before and :after property?
img and input are both replaced elements.
A replaced element is any element whose appearance and dimensions are
defined by an external resource. Examples include images (<img> tags),
plugins (<object> tags), and form elements (<button>, <textarea>,
<input>, and <select> tags). All other elements types can be referred
to as non-replaced elements.
:before and :after only work with non-replaced elements.
From the spec:
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.
With span:before, span:after, the DOM looks like this:
<span><before></before>Content of span<after></after></span>
Evidently, that won't work with <img src="" />.
:before and :after are not required to work for replaced elements, and CSS specifications do not specify how they would work for them, and the concept of replaced element is somewhat vague.
The CSS 2.1 specification clearly suggests that they can work for replaced elements, just saying that it does not “fully define” how. This relates to the issue that a replaced element is expected to have its own visual rendering, which is not controlled by CSS, whereas the pseudo-elements should add something to the content of the element. The spec adds that this will be defined “in more detail” in a future specification, but this has not taken place so far.
Browser vendors just decided to avoid problems by not implementing these pseudo-elements for some elements at all.
It is not clear at all what “replaced element” means, and the meaning appears to have changed somewhat. It is often interpreted as meaning the same as empty element (an element with EMPTY declared content, i.e. an element that cannot have any content), but CSS 2.1 itself shows a sample style sheet with the selector br:before (though browsers have ignored this, implementing br their own way). It can be argued that more and more elements have moved into the scope of CSS rendering, at least in part. For example, an input element (incuding its font, colors, etc.) is largely controllable with CSS in modern browsers.
Current browsers (Firefox, IE, Chrome) do not seem to support the :after and :before pseudo-elements for empty elements other than hr. For hr, IE and Chrome place the generated content inside a bordered box, which is the implementation of hr; the content makes the box taller. Firefox places the content of both (!) pseudo-elements after the horizontal rule that is its implementation of hr. This variation illustrates the kinds of “interaction” problems that are referred to in CSS 2.1.
It is often claimed that these pseudo-elements cannot be used for empty elements since their HTML definitions do not allow any content. This is a category error. The syntax rules of a markup language do not restrict what you can do in CSS
To conclude, :after and :before are currently not usable for empty elements (except marginally for hr), but this is mainly due to implementations and may change in the future.
I've spent several hours plucking out my hair only to find that some other css override content (or display:none) property of my selector.
For example, if the following code is written in some other place, before or after element will never show:
#id > child:before {
content: none!important;
}
<html>
<div id="id" class="class">
<child>
Before element is not showing
</child>
</div>
<style>
child:before {
content: 'before';
color: 'red';
}
</style>
</html>
Just find the css which is overwriting your style and spam stronger selectors and !important to make it work
#id>child:before {
content: none!important;
}
<html>
<div id="id" class="class">
<child>
Before element is <strong>showing</strong>
</child>
</div>
<style>
#id.class>child:before {
content: 'before'!important;
border: 1px solid red;
}
</style>
</html>
<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, the following css useful:
img{
position: relative;
}
img:after{
position: absolute;
content: "Any allowed type of content including a fallback image";
left: 0;
}
For a good example, please refer to https://css-tricks.com/7-practical-uses-for-the-before-and-after-pseudo-elements-in-css/
Elements that doesn't have closing tag are void elements and they can't display content inside them:
https://www.w3.org/TR/html5/syntax.html#void-elements
All Blink, Webkit and Quantum browsers allow you to create pseudo elements only on checkboxes but this is controversial since no spec allow this behavior.
Here an example:
https://codepen.io/equinusocio/pen/BOBaEM/
input[type="checkbox"] {
appearance: none;
color: #000;
width: 42px;
height: 24px;
border: 1px solid currentColor;
border-radius: 100px;
cursor: pointer;
transition: all 100ms;
background-size: 30%;
outline: none;
position: relative;
box-sizing: border-box;
background-color: #eee;
transition: background-color 200ms;
&::before {
content: '';
position: absolute;
left: 2px;
top: 2px;
bottom: 2px;
height: 18px;
width: 18px;
border-radius: 50%;
background-color: currentColor;
will-change: transform;
transition: transform 200ms cubic-bezier(.01,.65,.23,1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
&:checked {
background-color: aquamarine;
&::before {
transform: translateX(100%);
}
}
}