Line break in title element

Question

So, I am trying to recreat a polaroid image display that i've found online which uses the title element as the caption of the image as well. The thing is that i want a line break inside the title element and I cannot achieve that. I used br but inside the title="..." the text is just a plain text which gives as a result the br like a text as well. For example I want to have a caption of "Hello br world", with br to be the point of breaking the line/title. I am giving you the CSS code:

.polaroid-images a  {

    background: white;
    display: inline;
    float: left;
    margin: -50px 50px 30px;
    padding: 10px 10px 25px;
    text-align: center;
    text-decoration: none;
    -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
    box-shadow: 0 4px 6px rgba(0,0,0,.3);
    -webkit-transition: all .15s linear;
    -moz-transition: all .15s linear;
    transition: all .15s linear;
    z-index:0;
    position:relative;

}

.polaroid-images a:after {

    color: #333;
    font-size: 20px;
    content: attr(title);
    position: relative;
    top:15px;

}

.polaroid-images img { 

    display: block; 
    width: inherit;

}

and the HTML

<div class="polaroid-images">
    <a href="https://www.youtube.com/" title="Hello world"><img height="150" src="1st project/1stfront.jpg" alt="First" title="" /></a>
</div>

I used elements like & # 10; or & # 13; that some people suggested which worked only on the tooltip that comes out when i hover the image or its caption, whilst i want it to be visible in the caption of the image.

Thanks!

Answer 1

Both 
 and just a line break in code should work. Of course it will display just as a space (like every line break in HTML) unless you explicitly change that in CSS:

.polaroid-images a:after {
  white-space: pre;
}