Add line break to ::after or ::before pseudo-element content
The content
property states:
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. See "Strings" and "Characters and case" for more information on the "\A" escape sequence.
So you can use:
#headerAgentInfoDetailsPhone:after {
content:"Office: XXXXX \A Mobile: YYYYY ";
white-space: pre; /* or pre-wrap */
}
http://jsfiddle.net/XkNxs/
When escaping arbitrary strings, however, it's advisable to use \00000a
instead of \A
, because any number or [a-f]
character followed by the new line may give unpredictable results:
function addTextToStyle(id, text) {
return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}
adding a line break to li:before pseudo-element
Using \A
replace <br>
To \A
Css
li:before{
content:'hello \A how \A are \A';
white-space: pre;
}
Snippet Example
li:before{content:'hello \A how \A are \A';white-space: pre;}
<ul><li></li></ul>
Can you add line breaks to the :after pseudo element?
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.
CSS pseudo-element content value with line-break via attr inserted by Javascript
Use a plain newline character (\n
in your JavaScript string), fix the getElementById()
call (get rid of "#"), and add white-space: pre-wrap;
to the CSS.
const ele = document.getElementById('my-ele')ele.classList.add('loading');ele.setAttribute('loading-text', 'Your file is being generated...\nThis may take some minutes');
.loading::after { white-space: pre-wrap; content: attr(loading-text);}
<div id="my-ele"></div>
Force no line-break on pseudo element (:after)
You can also go with using the standard diamond from UTF8: ◇
.
If you let your :after
as display: inline
it will not break because you're not adding any space between the last word and it.
.alpha.solution3:after { display: inline; content: "◇"; font-weight: normal; font-size: 1.2em;}
<h1 class="alpha solution3">A solution that does not require Javascript neither a SPAN</h1>
Line breaks in CSS pseudo elements using attribute selector
If you are using \A
or \a
or anything similar as a value to your HTML attribute is just a static value. Using something like following in your CSS will not parse such syntax for your content
property
<div data-stuff="Hello \a World"></div>
And CSS like
content: attr(title);
/*
This will not parse \a as a line break and would rather treat it as
a string.
*/
If you want to add line breaks from CSS, you need to declare \A
in your stylesheet and not the HTML attribute. Hence, something like
content: attr(title) '\A World'; /* works now, as your \A will be parsed by CSS */
Adding a CSS pseudo-element at the end of each non-explicit line break
If you can do it with only divs then it would be easy to consider pseudo elements:
.container {
overflow: hidden;
padding-bottom:15px;
}
.edge {
display: inline-block;
margin-top: 15px;
position: relative;
font-size:0;
}
.edge::before {
content: var(--i, url('https://via.placeholder.com/25x150'));
}
.edge::after {
content: "";
position: absolute;
top: 100%;
right: 0;
height: 15px;
background: url("https://media.freestocktextures.com/cache/25/a8/25a8e8f0073efa0592f685739ce3386b.jpg");
left: -100vw;
}
<div class="container">
<div class="edge" style="--i:url(https://via.placeholder.com/20x200)"></div>
<div class="edge" style="--i:url(https://via.placeholder.com/15x300)"></div>
<div class="edge"></div>
<div class="edge" style="--i:url(https://via.placeholder.com/20x200)"></div>
<div class="edge" style="--i:url(https://via.placeholder.com/15x300)"></div>
<div class="edge"></div>
<div class="edge" style="--i:url(https://via.placeholder.com/20x200)"></div>
<div class="edge" style="--i:url(https://via.placeholder.com/15x300)"></div>
<div class="edge"></div>
<div class="edge" style="--i:url(https://via.placeholder.com/20x200)"></div>
<div class="edge" style="--i:url(https://via.placeholder.com/15x300)"></div>
<div class="edge"></div>
<div class="edge" style="--i:url(https://via.placeholder.com/20x200)"></div>
<div class="edge" style="--i:url(https://via.placeholder.com/15x300)"></div>
<div class="edge"></div>
<div class="edge" style="--i:url(https://via.placeholder.com/20x200)"></div>
<div class="edge" style="--i:url(https://via.placeholder.com/15x300)"></div>
<div class="edge"></div>
<div class="edge" style="--i:url(https://via.placeholder.com/20x200)"></div>
<div class="edge" style="--i:url(https://via.placeholder.com/15x300)"></div>
<div class="edge"></div>
</div>
Prevent pseudo-element from breaking a line by itself
You can add a negative margin equal to the icon size and use padding on the parent element to rectify this. This trick will enable the break when we reach the first word and logically the icon will follow.
I also removed the margin-left
and made the width bigger then adjusted the backgound position to the right.
p { padding-right:22px;}.txtbtn { font-size: 1.125rem; line-height: 1.222222222; letter-spacing: 2.57px; color: orange; text-decoration: none; position: relative; text-transform: uppercase;}
.txtbtn::after { position: relative; top: 0; display: inline-block; margin-right:-32px; width: 32px; height: 15px; content: ""; background: url('https://www.jea.com/cdn/images/svgs/right-arrow.svg') no-repeat right/contain;}
<p><a href="#" class="txtbtn">Lorem ipsum dolor sit amet, consectetur abittor.</a></p>
How to insert a line break before an element using CSS
It's possible using the \A
escape sequence in the psuedo-element generated content. Read more in the CSS2 spec.
#restart:before { content: '\A'; }
You may also need to add white-space:pre;
to #restart
.
note: \A
denotes the end of a line.
p.s. Another treatment to be
:before { content: ' '; display: block; }
Related Topics
How to Change the Bootstrap 4 Navbar Button Icon Color
How to Use Particular CSS Styles Based on Screen Size/Device
How to Make the Items in the Last Row Consume Remaining Space in CSS Grid
How to Use Svg as Content in a Pseudo Element ::Before or ::After
A Grid Layout With Responsive Squares
Difference Between Px, Em and Ex
How to Display List Items as Columns
How to Select All Children of an Element Except the Last Child
Is a Relative Path in a CSS File Relative to the CSS File
Css3 Transition on Click Using Pure CSS
How to Use Template Literals in Tailwindcss to Change Classes Dynamically
Changing the Width of Bootstrap Popover
Greyscale Background CSS Images
Position: Absolute Without Setting Top/Left/Bottom/Right
Css3 Property Webkit-Overflow-Scrolling:Touch Error