Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>The only way I can think of to get the effect purely by CSS requires:</p> <ol> <li>An obscenely excessive amount of extra html markup.</li> <li>A willingness to allow for some slight inexactness to the height of the background in comparison to the character itself.</li> <li>A meticulous amount of testing on the particular font(s) you are going to use it on to see what results you are likely to get across browsers.</li> </ol> <p>In other words: it really better be well worth the effort, and it probably ought to be used on only a very short string of text.</p> <p>Here's <a href="http://jsfiddle.net/zPw4E/32/" rel="nofollow"><strong>an example fiddle</strong></a> with the word color left contrasting to see how the background fits the letters. <strong>Note: this undoubtedly will have some variation on height and spacing above/below letters based on browser and font's being seen by you.</strong> The use of a <code>:before</code> pseudo-element to achieve the effect means accommodations would need to be made for older browsers (IE7 and under).</p> <p>Here's the basic code in the fiddle.</p> <pre><code>&lt;span&gt;H&lt;/span&gt;&lt;span class="short"&gt;e&lt;/span&gt;&lt;span&gt;l&lt;/span&gt;&lt;span&gt;l&lt;/span&gt;&lt;span class="short"&gt;o&lt;/span&gt;&lt;span class="short"&gt;w&lt;/span&gt; &lt;span class="short"&gt;w&lt;/span&gt;&lt;span class="short"&gt;o&lt;/span&gt;&lt;span class="short"&gt;r&lt;/span&gt;&lt;span&gt;l&lt;/span&gt;&lt;span&gt;d&lt;/span&gt; </code></pre> <pre class="lang-css prettyprint-override"><code> span { color: white; display: inline-block; position: relative; height: 1em; } span:before { content: ''; position: absolute; top: .2em; right: 0; bottom: .1em; left: 0; background-color: black; z-index: -1; } span.short:before { top: .4em; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload