How to insert line break before an element using CSS? Last Updated : 04 Apr, 2019 Summarize Comments Improve Suggest changes Share Like Article Like Report The white-space property is used to insert the line break before an element. This property controls the text wrapping and white-spacing. Line break between the lines: The line break can be added between the line of text. The white-space: preline; is used to insert line break before an element. Example 1: html <!DOCTYPE html> <html> <head> <title> Insert line break before an element </title> <!-- CSS style to insert line break before an element --> <style> p { color:green; white-space: pre-line; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2> Insert line break before an element </h2> <p> Data Structure Algorithm Computer Networks Web Technology </p> </body> </html> Output: Line-break between HTML Elements: The line-break between HTML elements can be added by using CSS properties. There are two methods to force inline elements to add new line. Using display property: A block-level element starts on a new line, and takes up the entire width available to it. Using carriage return character (\A): We can add a new-line by using the ::before or ::after pseudo-elements. Example 2: html <!DOCTYPE html> <html> <head> <title> Insert line break and content before an element </title> <!--It adds the GeeksforGeeks A computer science portal --> <style> p::before { color:green; content: "GeeksforGeeks \A " "A computer science portal"; display: block; white-space: pre; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2> Insert content and line break before an element </h2> <p>Data Structure</p> <p>Algorithm</p> </body> </html> Output: Example 3: This example uses carriage return character "\A" to add line break before an element. html <!DOCTYPE html> <html> <head> <title> Insert line break before an element </title> <!-- Style to add the line break --> <style> p::before { content: "\A"; white-space: pre; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2> Insert line break before an element </h2> <p>Data Structure</p> <p>Algorithm</p> <p>Operating System</p> </body> </html> Output: Comment More infoAdvertise with us Next Article How To Add Line Break in CSS? A AmanAgarwal6 Follow Improve Article Tags : CSS Similar Reads How to use ::before and ::after elements in Tailwind CSS ? In Tailwind CSS, we can use the ' :: before ' and ' :: after ' pseudo-elements by adding utility classes directly in your HTML. Simply apply the "before:" or "after:" prefix followed by the desired utility classes to style elements before or after their content. Using Utility ClassesTailwind CSS off 1 min read How to add space (" ") after an element using :after selector in CSS ? The :after selector in CSS is used to add the same content multiple times after the content of other elements. It inserts something after the content of each selected element. Syntax: :after { // CSS Property}Example 1: This example uses :after selector to add space after an element. html <!-- HT 1 min read How to insert a page break after each footer element in CSS ? CSS is used for designing a webpage to make it more beautiful and attractive for the users. After inserting a page break after each footer, it will look better and also avoids repetition by using CSS page-break-after property. Syntax: .foot { page-break-after: always; } Page-break-after provides a l 2 min read How to add line break using <br> Tag in HTML? The <br> tag is used to create a line break in HTML. It allows you to break text into a new line without starting a new paragraph or block. This is helpful when you need to format text in a specific way, like in poems or addresses. For adding a line break, simply insert the <br> tag wher 1 min read How To Add Line Break in CSS? CSS provides flexible options to add or manage line breaks in your content. Here are some effective techniques:1. Using the white-space PropertyThe white-space property allows controlling how text wraps and respects line breaks within an element.HTML<html> <head> <style> .break { w 2 min read How to Break Line Without using <br> Tag in HTML / CSS? Breaking lines in HTML without <br> tags can be achieved using block-level elements such as <div> or <p> combined with CSS properties like display: block; or display: inline-block; and others. These elements naturally wrap text or content, facilitating clean and structured layout d 2 min read Like