html – Wrapping lines in CSS without using extra elements

Question:

I have 2 inline elements and I need to make the line break without needing to add display: block; or if possible add but not occupy 100% of the line:

<div class="box-error-page cb">
    <h1 class="title-page-error title-error-default fleft">
        404
    </h1>

    <h2 class="title-not-found title-error-default">
        Ops! Página não encontrada
    </h2>

    <p>Não foi possível localizar o link que você estava buscando.</p>

    <a href="" class="cb">Ir à página inicial</a>
    <a href="javascript:history.go(-1);" class="cb">Voltar à página anterior</a>
</div>

In case the 2 links at the end should break the line, I wanted to see if there is any way, without the need to use extra elements, just to break the line, I know I could do it with UL>LI .

Answer:

You can use the :after pseudo-element

a:after{content:""; display:block; clear:both}

:after works from IE8. With it you create an element in CSS, so you don't need to mess with your HTML.

Example: http://jsfiddle.net/xqbyeq6k/