How to add a dash before text in CSS
<p>I'm trying to add a dash before text. See image. How do I accomplish the dash before the text so that it looks like the image?</p>

<p>I have the following html</p>

<pre><code>&lt;div class="mrvl-ex-grid"&gt;
&lt;article class="sample"&gt;
    &lt;img src="/images/examples/PN9Xg.jpg" alt="Lorem Sum"&gt;&lt;div class="mrvl-ex-item-hover-menu"&gt;
    &lt;div class="mrvl-ex-item-preview-btn"&gt;&lt;/div&gt;
    &lt;label class="mrvl-ex-item-label"&gt;Video&lt;/label&gt;
&lt;/div&gt;
&lt;/article&gt;
&lt;/div&gt;
</code></pre>

<p>Here's the jsfiddle with the CSS:</p>

<pre><code>https://jsfiddle.net/weina67/0vozsjsb/
</code></pre>



<p>I got the hover menu and preview button to work (but not the dash at the middle. How would you add the dash at the middle between the preview button and label? See Image attached</p>

<p><a href="https://i.stack.imgur.com/eAm97.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eAm97.png" alt="enter image description here"></a></p>

<p>The hover menu and label and preview button are shown when people hover over the image. Also I have to make the dash responsive (Looks good on 1024px, 1280px, 1440px). It has to show in the middle of preview button and label.</p>

<p>Note in the fiddle, you have to hover over the image to see the label and where I want the dash added.</p>