CSS: Causing line breaks for inline elements without <br />

This can be done, but will not work for all browsers. You need to use the :after pseudo-element with white-space and content. Like so

<html>
<head>
<style type="text/css">
    div a:after {white-space: pre;content:'\A';}
</style>
</head>
<body>
<div>
   <a href="element1">Element 1</a>
   <a href="element1">Element 2</a>
   <a href="element1">Element 3</a>
</div>
</body>
</html>

Reference: http://www.w3.org/TR/CSS2/generate.html#content


This can now be implemented reliably with css grid

div {
  display: grid;
  grid-template-columns: 100%;
}

div a {
  grid-column-start: 1;
}

Tags:

Css

Recent Posts