Why not simplify it all? Also, is the anchor tag (<a>
) even required? It looks like it's not going to go anywhere as you want the answer to the question to be in-line with one another. If you don't need it, switch it up to <strong>
.
If you're building a FAQ section I would suggest using an un-ordered list (<ul>
) or a definition list (<dl>
). http://www.w3.org/TR/REC-html40/struct/lists.html
HTML
<div id="faqs">
<p>
<a class="question" href="">A random Question?</a>
A specific answer: text breaks!
</p>
</div>
CSS
#faqs {
font: 12pt/1.5 'EB Garamond', serif;
color: #202b71;
}
#faqs a {
color: #4b82ff;
font-size: 20px;
padding-right: 20px; /* instead of text-indent */
text-decoration: none;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,255)), to(rgba(0,0,0,0)));
}