HTML5 - position h1 text next its image

Question

I'm trying to put in an HEADER tag a H1 tag next to a logo image as below:

 /* line 1, ../scss/layout/_header.scss */ header { background: white; color: red; height: 100px; } header img.logoImage{ width:30px; height:30px; } /* line 6, ../scss/layout/_header.scss */ header h1#companyName { padding: 20px; font-size: 20px; } /* line 10, ../scss/layout/_header.scss */ header h1#companyName a .logoImage { } 

  <header> <h1 id="companyName"> <a href="#" title="Company Website"> <img class="logoImage" title="" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSd51Q5z8j6c_EBEYzZgU1pfyiGHxOUgchpUs9wC3eaFn6PrXfqe8kjWA" alt="Company Name"/> Company name </a> </h1> </header> 

The thing is that "Some title" is not showing as it stays underneath the image. Also, is this a good way to implement it? (SEO etc etc)

Could you please shed some light on it?

Thanks!

Answer 1

您可以在选择器之后尝试使用CSS：

.logoImage:after { content:attr(alt);}