I have something like this:
<li>Post by <a>Author</a></li>
And I want to display the link in a new line, like this
Post by Author
How can I achieve this? Clear:left doesn't work.
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.
Thankfully, there is a keyboard shortcut that moves to the next line. Move the text cursor to where you want the new line to begin, press the Enter key, hold down the Shift key, and then press Enter again.
The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. word-break: break-all; It is used to break the words at any character to prevent overflow.
To do a line break in HTML, use the <br> tag. Simply place the tag wherever you want to force a line break. Since an HTML line break is an empty element, there's no closing tag.
Use the display property
a{ display: block; }
This will make the link to display in new line
If you want to remove list styling, use
li{ list-style: none; }
How about with a :before
pseudoelement:
a:before { content: '\a'; white-space: pre; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With