Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I vertically centre bullets that bracket headers
    primarykey
    data
    text
    <p>I'm trying to create an effect where <code>h#</code> elements are bracketed by bullet characters. If the the heading breaks across multiple lines, the bullets should be to the left and right of the text block, and vertically centred.</p> <p>Take this example HTML5 and CSS3:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="content-container"&gt; &lt;h1&gt;Short title&lt;/h1&gt; &lt;h1&gt;Really long title that will hopefully span multiple lines to demonstrate the problem I'm trying to solve here&lt;/h1&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; h1 { font-weight: bold; text-align: center; } h1:before { content: '— '; } h1:after { content: ' —'; } ​ </code></pre> <p>This renders the bullets, but when there are line breaks the bullets end up wrapping with the text itself.</p> <p>How can I change the CSS so that the bullets are placed to the left or right of the whole text block, and vertically centered against it? This <a href="http://jsfiddle.net/zvufe/" rel="nofollow">jsFiddle</a> depicts the effect better than I can describe it. Note that there are containers that exist above the header element (they just aren't exclusive containers for it) which could also be used.</p> <p>I don't want to change the HTML because that's just too fragile a solution: it requires changes in the CMS templates, the content itself, and an edict to all future content authors — which will be superfluous if the theming ever changes again.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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